<template>
    <div id="app">
        <div class="bbbug_bg" @click="hideAll" :style="{backgroundImage:'url('+getStaticUrl(background)+')'}">
        </div>
        <!-- <div class="snow"></div> -->
        <div class="bbbug_link">
            <a href="javascript:;" title="显示当前房间微信小程序码" @click="showQrCode">小程序</a>
            <a href="https://qm.qq.com/cgi-bin/qm/qr?k=3yei1QB3MehVQoBWiDEMU0NmdMIdPwPD&jump_from=webapi"
                target="_blank">QQ群</a>
            <a href="https://doc.bbbug.com" target="_blank">开发文档</a>
            <a href="https://gitee.com/bbbug_com" target="_blank">Gitee</a>
            <a href="https://github.com/HammCn" target="_blank">Github</a>
        </div>
        <div class="bbbug_main">
            <div class="bbbug_main_box" v-if="roomInfo && userInfo" v-loading="appLoading">
                <div class="bbbug_main_menu">
                    <div class="bbbug_main_menu_head" @click="openMySetting" title="我的个人中心"><img class="xiaomi"
                            :src="userInfo ? getStaticUrl(userInfo.user_head) : getStaticUrl('new/images/nohead.jpg')"
                            :onerror="getStaticUrl('new/images/nohead.jpg')" />
                    </div>
                    <div v-if="roomInfo.room_type==1 || roomInfo.room_type==4">
                        <div class="bbbug_main_menu_icon">
                            <div @click="showSearchSongs">
                                <img :src="getStaticUrl('new/images/menubar_picksong.png')" title="点歌" />
                                <div>点歌</div>
                            </div>
                        </div>
                        <div class="bbbug_main_menu_icon" :data-count="songCount">
                            <div @click="showPlaySongList">
                                <img :src="getStaticUrl('new/images/menubar_pickedsong.png')" title="已点歌曲列表" />
                                <div>已点</div>
                            </div>
                        </div>
                        <div class="bbbug_main_menu_icon">
                            <div @click="showMySongList">
                                <img :src="getStaticUrl('new/images/menubar_mysong.png')" title="我点过的歌单" />
                                <div>歌单</div>
                            </div>
                        </div>
                    </div>
                    <div class="bbbug_main_menu_icon" v-if="!roomInfo.room_hide">
                        <div @click="showRoomList">
                            <img :src="getStaticUrl('new/images/menubar_selectroom.png')" title="切换房间" />
                            <div>房间</div>
                        </div>

                    </div>
                    <el-upload v-if="(roomInfo.room_type==1 || roomInfo.room_type==4) && userInfo.user_id>0"
                        :action="uploadMusicUrl" :show-file-list="false" :on-success="handleMusicUploadSuccess"
                        :before-upload="doUploadMusicBefore" :data="baseData">
                        <div class="bbbug_main_menu_icon">
                            <div>
                                <img :src="getStaticUrl('new/images/menubar_upload.png')" title="上传搜索不到的歌曲" />
                                <div>上传</div>
                            </div>
                        </div>
                    </el-upload>
                    <div class="bbbug_main_menu_setting">
                        <div @click="showSystemSetting">
                            <img :src="getStaticUrl('new/images/menubar_setting.png')" title="系统设置" />
                        </div>
                    </div>
                </div>
                <div class="bbbug_main_chat">
                    <div class="bbbug_main_chat_header">
                        <div class="bbbug_main_chat_room_info">
                            <span class="bbbug_main_chat_room_id"
                                v-if="!roomInfo.room_hide">ID:{{roomInfo.room_id}}</span>
                            <span class="bbbug_main_chat_room_name hideWhenPhone">{{roomInfo.room_name}}
                                <i title="点歌音乐房" class="iconfont bbbug_main_room_icon icon-changyongtubiao-mianxing-61"
                                    v-if="roomInfo.room_type==1"></i></span>
                            <i title="房主播放器" class="iconfont bbbug_main_room_icon icon-icon_voice"
                                v-if="roomInfo.room_type==4"></i>
                            <i title="修改房间信息"
                                class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-32 bbbug_main_room_icon_setting"
                                @click="openRoomSetting"
                                v-if="roomInfo.room_user==userInfo.user_id || userInfo.user_admin">管理</i>

                        </div>
                        <div class="bbbug_main_chat_online">
                            <a href="https://doc.bbbug.com/4056059.html" class="bbbug_main_chat_invate"
                                style="color:orangered;text-decoration:none;" target="_blank">插件开发</a>
                            <span title="复制邀请链接" class="bbbug_main_chat_invate"
                                :data-clipboard-text="copyData">邀请</span>
                            <span @click.stop="showOnlineList" title="打开在线用户列表">
                                <i class="iconfont icon-icon_people_fill">
                                </i>
                                <font color=#999>{{onlineList.length}}在线</font>
                            </span>
                        </div>
                    </div>
                    <div v-if="!roomInfo.room_app || !roomInfo.room_fullpage">
                        <div class="bbbug_app_close" @click="isAppOpenToggle" v-if="roomInfo.room_app"
                            :style="{top:(isAppOpen?'242px':'42px')}">
                            {{isAppOpen?"关闭应用":"打开应用"}}</div>
                        <div class="bbbug_main_chat_history" id="bbbug_main_chat_history" @scroll="onMessageScroll"
                            @click="hideAll" @contextmenu.prevent="hideAll"
                            :style="{top:(isAppOpen&&roomInfo.room_app?'242px':'42px')}">
                            <div v-for="(item,index) in messageList" :key="index">
                                <div v-if="item.type=='text' || item.type=='img' || item.type=='link' || item.type=='jump' || item.type=='notice'"
                                    class="bbbug_main_chat_item bbbug_main_chat_text"
                                    :class="item.user.user_id==userInfo.user_id?'bbbug_main_chat_mine':''">
                                    <div class="bbbug_main_chat_head">
                                        <el-dropdown trigger="click" @command="commandUserHead" :index="index">
                                            <img class="bbbug_main_chat_head_image xiaomi"
                                                :src="getStaticUrl(item.user.user_head)"
                                                :onerror="getStaticUrl('new/images/nohead.jpg')"
                                                @dblclick.stop="doTouch(item.user.user_id)" />
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item :command="beforeHandleUserCommand(item.user, 'at')"
                                                    v-if="item.user.user_id!=userInfo.user_id">
                                                    @Ta
                                                </el-dropdown-item>
                                                <!-- <el-dropdown-item class="bbbug_phone_message_back" :command="beforeHandleUserCommand(item.user, 'pullback')" v-if="userInfo && (item.user.user_id==userInfo.user_id || userInfo.user_admin || user.user_id == roomInfo.room_user)">
                                            撤回
                                        </el-dropdown-item>
                                        <el-dropdown-item :command="beforeHandleUserCommand(item.user, 'touch')"
                                            v-if="item.user.user_id!=userInfo.user_id">
                                            摸摸
                                        </el-dropdown-item> -->
                                                <el-dropdown-item
                                                    :command="beforeHandleUserCommand(item.user, 'sendSong')"
                                                    v-if="item.user.user_id!=userInfo.user_id">
                                                    送歌
                                                </el-dropdown-item>
                                                <el-dropdown-item
                                                    :command="beforeHandleUserCommand(item.user, 'removeBan')"
                                                    v-if="item.user.user_id!=userInfo.user_id && (userInfo.user_admin||userInfo.user_id==roomInfo.room_user)">
                                                    解禁
                                                </el-dropdown-item>
                                                <el-dropdown-item
                                                    :command="beforeHandleUserCommand(item.user, 'shutdown')"
                                                    v-if="item.user.user_id!=userInfo.user_id && (userInfo.user_admin||userInfo.user_id==roomInfo.room_user)">
                                                    禁言
                                                </el-dropdown-item>
                                                <el-dropdown-item
                                                    :command="beforeHandleUserCommand(item.user, 'songdown')"
                                                    v-if="item.user.user_id!=userInfo.user_id && (userInfo.user_admin||userInfo.user_id==roomInfo.room_user)">
                                                    禁歌
                                                </el-dropdown-item>
                                                <el-dropdown-item
                                                    :command="beforeHandleUserCommand(item.user, 'profile')">
                                                    主页
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                    <div class="bbbug_main_chat_name" :class="item.user.user_id<10000?'orangered':''"
                                        :title="item.user.user_id<10000?'骨灰级赞助用户':''">
                                        {{urldecode(item.user.user_name)}}
                                        <i class="iconfont icon-icon_certification_f user_icon"
                                            style="font-size:18px;color:#097AD8;" v-if="item.user.user_vip"
                                            :title="item.user.user_vip"></i>
                                        <span class="bbbug_main_chat_name_icon" v-if="item.user.user_icon==1"
                                            title="曾经的元老级管理员">元老</span>
                                    </div>
                                    <div class="bbbug_main_chat_context_menu"
                                        @contextmenu.prevent.stop="openMenu($event,item)">
                                        <!-- 图片消息 -->
                                        <div class="bbbug_main_chat_content" v-if="item.type=='img'"
                                            style="padding:5px;border-radius:10px;line-height:0;">
                                            <img class="bbbug_main_chat_img"
                                                :style="{width:getImageWidth(urldecode(item.content))+'px'}"
                                                :src="getStaticUrl(urldecode(item.content))"
                                                :onerror="getStaticUrl('/new/images/error.jpg')"
                                                :large="getStaticUrl(urldecode(item.resource))"
                                                :preview="item.message_id" />
                                        </div>
                                        <!--jump消息-->
                                        <div class="bbbug_main_chat_content bbbug_main_chat_jump"
                                            v-if="item.type=='jump'" title="快捷机票 点击进入"
                                            @click="enterRoom(item.jump.room_id)" style="border-radius:10px">
                                            <div class="bbbug_main_chat_jump_name">
                                                <div class="bbbug_main_chat_jump_id">ID:{{item.jump.room_id}}</div>
                                                {{item.jump.room_name}}
                                            </div>
                                            <div class="bbbug_main_chat_jump_desc">
                                                {{item.jump.room_notice||"能听歌就行了,房间公告写不写就算了吧"}}</div>
                                            <div class="bbbug_main_chat_jump_tips">快捷机票
                                                <font color=yellow v-if="item.jump.room_public==1">加密房间</font>
                                                <font color=#999 v-if="item.jump.room_public==0">公开房间</font>
                                            </div>
                                        </div>
                                        <!--link消息-->
                                        <div class="bbbug_main_chat_content bbbug_main_chat_jump"
                                            v-if="item.type=='link'" title="打开外部链接"
                                            @click="openNewWebPage(urldecode(item.link))" style="border-radius:10px">
                                            <div class="bbbug_main_chat_jump_name">
                                                {{urldecode(item.title)}}
                                            </div>
                                            <div class="bbbug_main_chat_jump_desc">
                                                {{urldecode(item.desc)||"没有读取到网站简介..."}}
                                            </div>
                                            <div class="bbbug_main_chat_jump_tips">{{urldecode(item.link)}}
                                            </div>
                                        </div>
                                        <!--房间公告-->
                                        <div class="bbbug_main_chat_content bbbug_main_chat_notice"
                                            v-if="item.type=='notice'" style="border-radius:10px">
                                            <div class="bbbug_main_chat_notice_title">房间公告</div>
                                            <div class="bbbug_main_chat_notice_content">
                                                {{urldecode(item.content)}}
                                            </div>
                                        </div>
                                        <!--文字消息-->
                                        <div v-if="item.isAtAll">
                                            <div class="bbbug_main_chat_content content_at" v-if="item.type=='text'">
                                                {{urldecode(item.content)}}</div>
                                        </div>
                                        <div v-if="!item.isAtAll">
                                            <div class="bbbug_main_chat_content content_at"
                                                v-if="item.type=='text' && item.user.user_id!=userInfo.user_id && (item.at && item.at.user_id==userInfo.user_id)">
                                                {{urldecode(item.content)}}</div>
                                            <div class="bbbug_main_chat_content"
                                                v-if="item.type=='text' && item.user.user_id!=userInfo.user_id && (!item.at || item.at.user_id!=userInfo.user_id)">
                                                {{urldecode(item.content)}}</div>
                                            <div class="bbbug_main_chat_content content_boy"
                                                v-if="item.type=='text' && item.user.user_id==userInfo.user_id && userInfo.user_sex==1">
                                                {{urldecode(item.content)}}</div>
                                            <div class="bbbug_main_chat_content content_girl"
                                                v-if="item.type=='text' && item.user.user_id==userInfo.user_id && userInfo.user_sex==0">
                                                {{urldecode(item.content)}}</div>
                                            <div class="bbbug_main_chat_content_loading love_fast" v-if="item.loading">
                                                <i class="iconfont icon-loading"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bbbug_main_chat_name_time">{{friendlyTime(item.time)}}</div>
                                    <div class="bbbug_main_chat_content_quot" v-if="item.at && item.at.message"
                                        :title="getQuotMessage(item.at)">
                                        {{getQuotMessage(item.at)}}</div>
                                </div>
                                <div v-if="item.type=='system'" class="bbbug_main_chat_system">
                                    <span class="bbbug_main_chat_system_text">{{item.content}}</span>
                                </div>
                                <div v-if="item.type=='join'" class="bbbug_main_chat_system">
                                    <span class="bbbug_main_chat_system_text">
                                        欢迎<span v-if="item.where">{{item.where}}的</span><span v-if="item.user">
                                            <font class="orangered" style="cursor: pointer;" title="点击查看资料"
                                                @click.stop="showUserPage(item.user.user_id)">
                                                {{urldecode(item.name)}} </font>
                                        </span><span v-if="!item.user"><span
                                                v-if="item.plat">{{item.plat}}用户</span><span
                                                v-if="!item.plat">临时用户</span></span>{{item.user?'回来!':''}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div v-show="menuVisible" :style="{left:menuLeft+'px',top:menuTop+'px'}" class="contextmenu">
                            <div @click="quotMessage(selectedMessage);hideAll()">引用回复</div>
                            <div @click="sendBackMessage(selectedMessage);hideAll()"
                                v-if="selectedMessage.user.user_id==userInfo.user_id || (selectedMessage.user.user_id!=userInfo.user_id && (userInfo.user_admin||userInfo.user_id==roomInfo.room_user))">
                                撤回消息
                            </div>
                        </div>
                        <div class="bbbug_main_chat_toolbar">
                            <div class="bbbug_main_chat_toolbar_item">
                                <img title="发送表情" class="bbbug_main_chat_toolbar_emoji" @click.stop="showEmojiBox"
                                    :src="getStaticUrl('new/images/button_emoji.png')" />

                                <el-upload :action="uploadImageUrl" :show-file-list="false"
                                    :on-success="handleImageUploadSuccess" class="bbbug_main_chat_toolbar_img"
                                    :before-upload="doUploadBefore" :data="baseData">
                                    <img title="上传图片" class="" :src="getStaticUrl('new/images/button_image.png')" />
                                </el-upload>
                                <el-slider v-if="isVolumeBarShow" class="bbbug_main_menu_song_volume_bar"
                                    v-model="audioVolume" vertical show-stops @input="audioVolumeChanged" height="80px">
                                </el-slider>
                                <div class="bbbug_main_chat_input_song" v-if="isPlayerShow">
                                    <div class="bbbug_main_chat_input_song_name" v-if="songInfo && songInfo.song">
                                        <span>{{songInfo.song.name}}({{songInfo.song.singer}})</span>
                                        <i class="iconfont icon-icon_people_fill" style="
                                    font-weight: bold;
                                    font-size: 14px;
                                    vertical-align: middle;
                                    margin-left: 10px;
                                    display: inline-block;
                                "></i>
                                        <font style="cursor: pointer;" title="点击查看资料"
                                            @click.stop="showUserPage(songInfo.user.user_id)" class="orangered">
                                            {{urldecode(songInfo.user.user_name)}}</font>
                                    </div>
                                    <div class="bbbug_main_chat_input_song_ctrl"
                                        v-if="roomInfo.room_type == 1 || roomInfo.room_type == 4">
                                        <i v-if="songInfo" @click.stop="loveTheSong" title="收藏"
                                            class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-15"></i>
                                        <i title="音量" @click="setEnableOrDisableVolume" @mouseover="showAudioVolumeBar"
                                            class="iconfont volume_bar"
                                            :class="audioVolume>0?'icon-changyongtubiao-xianxingdaochu-zhuanqu-39':'icon-changyongtubiao-xianxingdaochu-zhuanqu-40'"></i>
                                        <i @click.stop="passTheSong" title="切歌/不喜欢" class="iconfont icon-xiayige"></i>
                                    </div>
                                </div>
                            </div>
                            <div title="跳到最新消息" class="bbbug_main_chat_toolbar_tobottom"
                                @click="isEnableScroll=true;autoScroll();" v-if="!isEnableScroll"><i
                                    class="iconfont icon-xiangxia"></i></div>
                        </div>
                        <div class="bbbug_main_chat_emojis" v-if="isEmojiBoxShow">
                            <div class="bbbug_main_chat_emojis_search">
                                <el-input placeholder="输入关键词搜索表情包" v-model="imageKeyword" clearable
                                    class="bbbug_main_chat_emojis_input" @keydown.13.native="searchImage">
                                    <el-button slot="append" icon="el-icon-search" @click="searchImage"></el-button>
                                </el-input>
                            </div>
                            <div v-loading="loadingSearchImage" style="text-align: left;">
                                <el-popover placement="top-start" title="预览表情" trigger="hover" :open-delay="500"
                                    v-for="item in imageList" :key="item">
                                    <img :src="item"
                                        style="width:200px;height:200px;border-radius:10px;border:1px solid #f5f5f5;" />
                                    <img slot="reference" :src="item" @click.stop="sendEmoji(item)" />
                                </el-popover>
                            </div>
                        </div>
                        <div class="bbbug_main_chat_percent">
                            <div :style="{width:audioPercent+'%'}" v-if="songInfo"></div>
                        </div>
                        <div class="bbbug_main_chat_input">
                            <div class="bbbug_main_chat_input_toolbar"></div>
                            <div class="bbbug_main_chat_input_form">
                                <textarea @click="hideAll" class="bbug_main_chat_input_message"
                                    :placeholder="(roomInfo && roomInfo.room_sendmsg==1 && roomInfo.room_user!=userInfo.user_id && !userInfo.user_admin)?'全员禁言中,你暂时无法发言...':'Wish you enjoy your bugs...'"
                                    @keydown.13="sendMessage" @input="messageChanged" v-model="message"
                                    :disabled="(roomInfo && roomInfo.room_sendmsg==1 && roomInfo.room_user!=userInfo.user_id && !userInfo.user_admin)?true:false"></textarea>
                            </div>
                            <button class="bbbug_main_chat_input_send" id="qqLoginBtn" @click.stop="sendMessage"
                                :class="isEnableSendMessage?'bbbug_main_chat_enable':''">发送(Enter)</button>
                            <el-tag class="bbbug_main_chat_input_quot" closable type="info"
                                v-if="atUserInfo && atUserInfo.message" @close="atUserInfo={user:{}};">
                                {{getQuotMessage(atUserInfo)}}
                            </el-tag>
                            <div class="bbbug_main_chat_toolbar_lrc"
                                v-if="isLrcStringShow && (roomInfo.room_type ==1 || roomInfo.room_type==4)">
                                <span>{{lrcString}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="bbbug_app" v-if="roomInfo.room_app && (isAppOpen || roomInfo.room_fullpage)"
                        :class="roomInfo.room_fullpage?'bbbug_app_fullpage':''">
                        <iframe id="bbbug_app" @load="appLoaded" frameborder="0" :src="roomInfo.room_app"></iframe>
                    </div>
                </div>
                <div class="bbbug_frame">
                    <MySetting class="bbbug_frame_box" v-if="dialog && dialog.MySetting"></MySetting>
                    <MySongList class="bbbug_frame_box" v-if="dialog && dialog.MySongList"></MySongList>
                    <OnlineList class="bbbug_frame_box" v-if="dialog && dialog.OnlineList"></OnlineList>
                    <PlayingSongList class="bbbug_frame_box" v-if="dialog && dialog.PlayingSongList"></PlayingSongList>
                    <Profile class="bbbug_frame_box" v-if="dialog && dialog.Profile"></Profile>
                    <RoomCreate class="bbbug_frame_box" v-if="dialog && dialog.RoomCreate"></RoomCreate>
                    <RoomList class="bbbug_frame_box" v-if="dialog && dialog.RoomList"></RoomList>
                    <RoomPassword class="bbbug_frame_box" v-if="dialog && dialog.RoomPassword"></RoomPassword>
                    <RoomSetting class="bbbug_frame_box" v-if="dialog && dialog.RoomSetting"></RoomSetting>
                    <SearchSongs class="bbbug_frame_box" v-if="dialog && dialog.SearchSongs"></SearchSongs>
                    <SystemSetting class="bbbug_frame_box" v-if="dialog && dialog.SystemSetting"></SystemSetting>
                    <Login v-if="dialog && dialog.Login"></Login>
                </div>
            </div>
        </div>
        <UploadMusic v-if="uploadSongForm"></UploadMusic>
        <div class="bbbug_locked" v-if="isLocked"
            @contextmenu.prevent="isLockedOnlyBg=!isLockedOnlyBg;saveLockBgConfig()">
            <div class="bg_back" :style="{backgroundImage:'url('+getStaticUrl(background)+')'}"></div>
            <div class="bg" v-if="songInfo" :style="{backgroundImage:'url('+getStaticUrl(songInfo.song.pic)+')'}"></div>
            <div v-show="!isLockedOnlyBg">
                <div class="logo xiaomi">
                    <img :src="getStaticUrl('new/images/logo.png')" />
                </div>

                <div class="copyright">所有音乐资源来源于第三方,请勿用于商业非法用途!</div>
                <div class="main">
                    <div class="pic"><img :src="getStaticUrl('new/images/logo.png')" /></div>
                    <div class="pic"><img
                            :src="songInfo ? getStaticUrl(songInfo.song.pic) : getStaticUrl('new/images/logo.png')" />
                    </div>
                    <div class="info" v-if="songInfo">
                        <div class="name">{{songInfo.song.name}} - {{songInfo.song.singer}}</div>
                        <div class="desc">[{{roomInfo.room_id}}]{{urldecode(roomInfo.room_name)}}
                            点歌人:{{urldecode(songInfo.user.user_name)}}</div>
                    </div>
                    <div class="info" v-if="!songInfo">
                        <div class="name">读碟中,请稍后...</div>
                        <div class="desc">[{{roomInfo.room_id}}]{{urldecode(roomInfo.room_name)}}</div>
                    </div>
                    <div class="controls" v-if="songInfo && (roomInfo.room_type == 1 || roomInfo.room_type == 4)">
                        <i title="音量" @click="setEnableOrDisableVolume" class="iconfont volume_bar"
                            :class="audioVolume>0?'icon-changyongtubiao-xianxingdaochu-zhuanqu-39':'icon-changyongtubiao-xianxingdaochu-zhuanqu-40'"></i>
                        <i @click.stop="loveTheSong" title="收藏"
                            class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-15"
                            style="margin: 0px 180px;"></i>
                        <i @click.stop="passTheSong" title="切歌/不喜欢" class="iconfont icon-xiayige"></i>
                    </div>
                    <div class="progress">
                        <div :style="{width: audioPercent +'%'}"
                            v-if="songInfo && (roomInfo.room_type == 1 || roomInfo.room_type == 4)"></div>
                    </div>
                    <div class="time">
                        <span class="now">{{audioTimeNow}}</span>
                        <span class="total">{{audioTimeTotal}}</span>
                    </div>
                    <div class="lrc">{{lrcString}}</div>
                </div>
            </div>
        </div>
        <audio :src="getStaticUrl('new/mp3/dingdong.mp3')" ref="noticePlayer"></audio>
        <audio :src="getStaticUrl('new/mp3/dong.m4a')" ref="audio_dong"></audio>
        <audio :src="getStaticUrl('new/mp3/ci.m4a')" ref="audio_ci"></audio>
        <audio :src="getStaticUrl('new/mp3/da.m4a')" ref="audio_da"></audio>
        <audio :src="nextAudioUrl" ref="preloadAudio" control1>
        </audio>
        <audio :src="audioUrl" ref="audio" control1 @timeupdate="audioTimeUpdate" @ended="audioEnded"
            @error="audioError" @loadedmetadata="audioLoaded" @canplay="canplay">
        </audio>
        <div class="bbbug_dark_cover" v-if="isDarkModel"></div>
    </div>
</template>
<script>
    import MySetting from './components/MySetting.vue';
    import MySongList from './components/MySongList.vue';
    import OnlineList from './components/OnlineList.vue';
    import PlayingSongList from './components/PlayingSongList.vue';
    import Profile from './components/Profile.vue';
    import RoomCreate from './components/RoomCreate.vue';
    import RoomList from './components/RoomList.vue';
    import RoomPassword from './components/RoomPassword.vue';
    import RoomSetting from './components/RoomSetting.vue';
    import SearchSongs from './components/SearchSongs.vue';
    import SystemSetting from './components/SystemSetting.vue';
    import UploadMusic from './components/UploadMusic.vue';

    import Login from './components/Login.vue';

    export
        default {
            components: {
                UploadMusic,
                MySetting,
                MySongList,
                OnlineList,
                PlayingSongList,
                Profile,
                RoomCreate,
                RoomList,
                RoomPassword,
                RoomSetting,
                SearchSongs,
                SystemSetting,
                Login
            },
            data() {
                return {
                    isAppOpen: true,
                    uploadSongForm: false,
                    dialog: false,
                    audioUrl: "",
                    nextAudioUrl: "",
                    // 默认音乐loading图
                    audioImage: "new/images/loading.png",
                    // 歌曲加载失败重试
                    audioRetryTimes: 0,
                    uploadImageUrl: "",
                    uploadMusicUrl: "",
                    atUserInfo: false,
                    copyData: "",
                    userInfo: false,
                    roomInfo: false,
                    appLoading: false,
                    isLocked: false,
                    isLockedOnlyBg: false,
                    isEnableScroll: true,
                    isEnableNotification: true,
                    isEnableNoticePlayer: true,
                    isEnableTouchNotice: true,
                    isEnableAtNotification: true,
                    isEnableSendMessage: false,
                    isEmojiBoxShow: false,
                    isLrcStringShow: true,
                    isPlayerShow: true,
                    messageList: [],
                    // 消息最大允许保留
                    historyMax: 100,
                    globalMusicSwitch: false,
                    onlineList: [],
                    timerForWebTitle: null,
                    isSendMessageByCtrl: false,
                    loadingSearchImage: false,
                    songInfo: false,
                    message: "",
                    timeDiff: 0,
                    // 默认音量
                    audioVolume: 50,
                    audioPercent: 0,
                    audioTimeNow: "",
                    audioTimeTotal: "",
                    isVolumeBarShow: false,
                    timerVolumeBar: null,
                    baseData: false,
                    rightClickItem: null,
                    menuVisible: false,
                    menuLeft: 0,
                    menuTop: 0,
                    selectedMessage: {
                        user: {},
                    },
                    _clipboard: false,
                    musicLrcObj: {},
                    lrcString: "",
                    // 默认背景图
                    background: "new/images/bg_dark.jpg",
                    emojiList: [],
                    imageList: [],
                    imageKeyword: "",
                    // 当前歌曲个数
                    songCount: 0
                }
            },
            created() {
                let that = this;
                this.global.guestUserInfo.user_head = this.getStaticUrl(this.global.guestUserInfo.user_head);
                this.isLockedOnlyBg = localStorage.getItem('isLockedOnlyBg') == 1 ? true : false;
                this.isAppOpen = localStorage.getItem('isAppClosed') == 1 ? false : true;
                window.addEventListener('message', function (event) {
                    if (!event.data || !event.data.event) {
                        return;
                    }
                    switch (event.data.event) {
                        case 'sendTextMessage':
                            that.message = event.data.message;
                            that.sendMessage();
                            break;
                        case 'hideLrc':
                            that.showOrHideLrc(false);
                            break;
                        case 'showLrc':
                            that.showOrHideLrc(true);
                            break;
                        case 'setVolume':
                            let volume = parseInt(event.data.volume);
                            if (volume >= 0 && volume <= 100) {
                                that.audioVolume = volume;
                                that.$refs.audio.volume = parseFloat(that.audioVolume / 100);
                            }
                            break;
                        case 'showUserInfo':
                            let userId = parseInt(event.data.userId);
                            if (userId > 0) {
                                that.showUserPage(userId);
                            }
                            break;
                        case 'showPlayer':
                            that.isPlayerShow = true;
                            break;
                        case 'hidePlayer':
                            that.isPlayerShow = false;
                            break;
                        case 'passTheSong':
                            that.passTheSong();
                            break;
                        case 'loveTheSong':
                            that.loveTheSong();
                            break;
                        case 'getNowSong':
                            that.audioTimeNow = that.getSongTime(that.$refs.audio.currentTime);
                            that.audioTimeTotal = that.getSongTime(that.$refs.audio.duration);
                            that.sendAppEvent('playSong', {
                                data: that.songInfo,
                                start: that.$refs.audio.currentTime,
                                total: that.$refs.audio.duration
                            });
                            break;
                        case 'getLrcObj':
                            that.sendAppEvent("lrc", that.musicLrcObj);
                            break;
                        case 'getThemeMode':
                            that.sendAppEvent("themeChanged", {
                                model: that.isDarkModel ? 'dark' : 'light'
                            });
                            break;
                        case 'hideAll':
                            that.hideAll();
                            break;
                        case 'sendImage':
                            that.sendEmoji(event.data.url);
                            break;
                        case 'getMessageList':
                            that.sendAppEvent('messageList', that.messageList);
                            break;
                        default:
                    }
                }, false);
            },
            mounted() {
                let that = this;
                // that.websocket.heartBeatTimer = setInterval(function () {
                //     if (that.websocket.isConnected && that.websocket.connection.readyState == 1) {
                //         that.websocket.connection.send('heartBeat');
                //     }
                // }, 10000);
                that.checkInitUrl(function () {
                    that.$on('App', function (data) {
                        that.AppController(data);
                    });
                    let isDarkModel = localStorage.getItem("isDarkModel") == 1 ? true : false;
                    that.updateDarkModel(isDarkModel);
                    for (let i = 1; i <= 30; i++) {
                        that.emojiList.push(that.getStaticUrl('new/images/emoji/' + i + '.png'));
                    }

                    that.hideAll();
                    let access_token = localStorage.getItem("access_token") || false;
                    that.updateServerTime();
                    window.onkeydown = function (e) {
                        switch (e.keyCode) {
                            case 27:
                                if (that.roomInfo.room_type == 1 || that.roomInfo.room_type == 4) {
                                    that.isLocked = !that.isLocked;
                                }
                                break;
                            default:
                                // console.log(e.keyCode)
                                if (e.target.localName != 'textarea' && e.target.localName != 'input') {
                                    switch (e.keyCode) {
                                        case 90:
                                        case 88:
                                        case 67:
                                        case 86:
                                        case 66:
                                        case 78:
                                        case 77:
                                            that.$refs.audio_dong.currentTime = 0;
                                            that.$refs.audio_dong.play();
                                            break;
                                        case 65:
                                        case 83:
                                        case 68:
                                        case 70:
                                        case 71:
                                        case 72:
                                        case 74:
                                        case 75:
                                        case 76:
                                            that.$refs.audio_ci.currentTime = 0;
                                            that.$refs.audio_ci.play();
                                            break;
                                        case 32:
                                        case 81:
                                        case 87:
                                        case 69:
                                        case 82:
                                        case 84:
                                        case 89:
                                        case 85:
                                        case 73:
                                        case 79:
                                        case 80:
                                            that.$refs.audio_da.currentTime = 0;
                                            that.$refs.audio_da.play();
                                            break;
                                        default:
                                    }
                                }
                        }
                    };

                    if (access_token) {
                        that.global.baseData.access_token = access_token;
                    } else {
                        that.global.baseData.access_token = that.global.guestUserInfo.access_token;
                    }
                    that.baseData = that.global.baseData;
                    that.uploadImageUrl = that.global.apiUrl + "/api/attach/uploadimage";
                    that.uploadMusicUrl = that.global.apiUrl + "/api/attach/uploadMusic";

                    let room_change_id = localStorage.getItem('room_change_id') || that.global.room_id;
                    if (!localStorage.getItem('isDarkModel') && localStorage.getItem('isDarkModel') != 0) {
                        that.$confirm('全新的BBBUG暗黑模式上线啦,是否体验一下?', '暗黑模式上线啦', {
                            confirmButtonText: '体验',
                            cancelButtonText: '暂不',
                            closeOnClickModal: false,
                            closeOnPressEscape: false,
                            type: 'warning'
                        }).then(function () {
                            that.updateDarkModel(true);
                            that.getUserInfo();
                            that.callParentFunction('noticeClicked', 'success');
                            that.$nextTick(function () {
                                that.$refs.audio.volume = parseFloat(that.audioVolume / 100);
                                if (that.audioUrl) {
                                    that.audioStartPlay();
                                }
                            });
                        }).catch(function () {
                            that.updateDarkModel(false);
                            that.getUserInfo();
                            that.callParentFunction('noticeClicked', 'success');
                            that.$nextTick(function () {
                                that.$refs.audio.volume = parseFloat(that.audioVolume / 100);
                                if (that.audioUrl) {
                                    that.audioStartPlay();
                                }
                            });
                        });
                    } else {
                        that.$alert('欢迎来音乐聊天室聊天，即将为你播放音乐!', '温馨提示', {
                            confirmButtonText: '确定',
                            callback() {
                                that.getUserInfo();
                                that.callParentFunction('noticeClicked', 'success');
                                that.$nextTick(function () {
                                    that.$refs.audio.volume = parseFloat(that.audioVolume / 100);
                                    if (that.audioUrl) {
                                        that.audioStartPlay();
                                    }
                                });
                            }
                        });
                    }
                    that._clipboard = new that.clipboard(".bbbug_main_chat_invate");
                    that._clipboard.on('success', function () {
                        that.$message.success("复制成功，快去发给好友吧~");
                    });
                    that._clipboard.on('error', function () {
                        that.$message.error("复制失败")
                    });
                    let volume = localStorage.getItem('volume');
                    if (volume == '' || volume == undefined || volume == null) {
                        volume = 50;
                    }
                    that.audioVolume = parseInt(volume);
                    document.addEventListener('paste', that.getClipboardFiles);
                    that.loadConfig();
                });
            },
            methods: {
                showOrHideLrc(show) {
                    this.isLrcStringShow = show;
                },
                isAppOpenToggle() {
                    this.isAppOpen = !this.isAppOpen;
                    localStorage.setItem('isAppClosed', this.isAppOpen ? 0 : 1);
                    if (!this.isAppOpen) {
                        this.isLrcStringShow = true;
                        this.isPlayerShow = true;
                    }
                },
                appLoaded() {
                    this.sendAppEvent('init', {
                        userInfo: this.userInfo,
                        roomInfo: this.global.roomInfo
                    });
                },
                /**
                 * @description: 保存播放器部分配置
                 * @param {null}
                 * @return {null}
                 */
                saveLockBgConfig() {
                    localStorage.setItem("isLockedOnlyBg", this.isLockedOnlyBg ? 1 : 0);
                },
                sendAppEvent(type, data = null) {
                    if (this.global.roomInfo.room_app && this.isAppOpen) {
                        let json = {
                            event: type,
                            data: data
                        };
                        document.getElementById("bbbug_app").contentWindow.postMessage(json, "*");
                    }
                },
                /**
                 * @description: 隐藏上传音乐窗口
                 * @param {null}
                 * @return {null}
                 */
                hideUploadMusicWindow() {
                    this.uploadSongForm = false;
                },
                /**
                 * @description: 初始化URL连接参数
                 * @param {function} 回调方法
                 * @return {null}
                 */
                checkInitUrl(callback) {
                    let that = this;
                    let code = '';
                    let plat = false;
                    switch (location.pathname) {
                        case '/gitee':
                            code = that.getQueryString('code');
                            plat = 'gitee';
                            break;
                        case '/ding':
                            code = that.getQueryString('code');
                            plat = 'ding';
                            break;
                        case '/oschina':
                            code = that.getQueryString('code');
                            plat = 'oschina';
                            break;
                        case '/qq':
                            code = that.getQueryString('code');
                            plat = 'qq';
                            break;
                        case '/':
                            if (location.search != '') {
                                let room_id = this.getQueryString("room_id") || 888;
                                let access_token = this.getQueryString("access_token") || false;
                                if (access_token) {
                                    localStorage.setItem('access_token', access_token);
                                }
                                localStorage.setItem('room_change_id', room_id);
                                location.replace(location.origin);;
                                return;
                            }
                            callback();
                            return;
                            break;
                        default:
                            let room_id = location.pathname.replace("/", '');
                            if ((/(^[1-9]\d*$)/).test(room_id)) {
                                localStorage.setItem('room_change_id', room_id);
                            }
                            location.replace(location.origin);;
                            return;
                    }

                    that.request({
                        url: 'user/thirdlogin',
                        data: {
                            from: plat,
                            code: code,
                        },
                        success(res) {
                            that.global.baseData.access_token = res.data.access_token;
                            localStorage.setItem('access_token', res.data.access_token);
                            location.replace(location.origin);;
                        },
                        error(res) {
                            setTimeout(function () {
                                location.replace(location.origin);;
                            }, 3000);
                        }
                    });
                },
                /**
                 * @description: 获取URL参数
                 * @param {string} 参数名称
                 * @return {string|null} 
                 */
                getQueryString(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]);
                    return null;
                },
                /**
                 * @description 显示当前房间的小程序码
                 * @param {null}
                 * @return {null}
                 */
                showQrCode() {
                    let that = this;
                    let roomAdminInfo = Object.assign({}, that.global.roomInfo.admin);
                    that.messageList.push({
                        type: "img",
                        content: that.global.apiUrl + '/api/weapp/qrcode?room_id=' + that.global.room_id,
                        resource: that.global.apiUrl + '/api/weapp/qrcode?room_id=' + that.global.room_id,
                        where: "channel",
                        at: roomAdminInfo,
                        message_id: 0,
                        time: parseInt(new Date().valueOf() / 1000),
                        user: roomAdminInfo
                    });
                    that.autoScroll();
                    that.sendAppEvent('qrcode', {
                        url: that.global.apiUrl + '/api/weapp/qrcode?room_id=' + that.global.room_id
                    })
                },
                /**
                 * @description: 游客登录
                 * @param {null}
                 * @return {null}
                 */
                loginGuest() {
                    localStorage.removeItem('access_token');
                    this.global.baseData.access_token = this.global.guestUserInfo.access_token;
                    this.global.userInfo = this.global.guestUserInfo;
                    this.hideAll();
                    this.getUserInfo();
                },
                /**
                 * @description: 显示登录窗口
                 * @param {null}
                 * @return {null}
                 */
                showLoginForm() {
                    this.userInfo = this.global.guestUserInfo;
                    this.hideAll();
                    this.dialog.Login = true;
                },
                /**
                 * @description: 设置暗黑模式
                 * @param {bool} 是否暗黑模式
                 * @return {null}
                 */
                updateDarkModel(isDarkModel) {
                    document.body.className = isDarkModel ? 'bbbug_dark' : '';
                    localStorage.setItem('isDarkModel', isDarkModel ? 1 : 0);

                    this.sendAppEvent('themeChanged', {
                        model: isDarkModel ? 'dark' : 'light'
                    });
                    this.isDarkModel = isDarkModel;
                    this.$forceUpdate();
                },
                /**
                 * @description: 读取本地配置
                 * @param {null}
                 * @return {null}
                 */
                loadConfig() {
                    this.isEnableNoticePlayer = localStorage.getItem('isEnableNoticePlayer') != 1 ? true : false;
                    this.isEnableNotification = localStorage.getItem('isEnableNotification') != 1 ? true : false;
                    this.isEnableTouchNotice = localStorage.getItem('isEnableTouchNotice') != 1 ? true : false;
                    this.isEnableAtNotification = localStorage.getItem('isEnableAtNotification') != 1 ? true : false;
                },
                /**
                 * @description: 显示右键菜单
                 * @param {event} 事件
                 * @param {object} 消息
                 * @return {null}
                 */
                openMenu(e, item) {
                    this.rightClickItem = item;
                    this.selectedMessage = item;
                    var x = e.pageX;
                    var y = e.pageY;

                    this.menuTop = y;
                    this.menuLeft = x;

                    this.menuVisible = true;
                },
                /**
                 * @description: 关闭右键菜单
                 * @param {null}
                 * @return {null}
                 */
                closeMenu() {
                    this.menuVisible = false;
                    this.selectedMessage = {
                        user: {}
                    };
                },
                getSongTime(long) {
                    long = parseInt(long);
                    if (long == 0 || long == NaN) {
                        return "00:00";
                    }
                    let string = "";
                    string += parseInt((long / 60)) < 10 ? ("0" + parseInt(long / 60)) : parseInt(long / 60);

                    string += ":";
                    string += (long % 60) < 10 ? (("0") + (long % 60)) : (long % 60)
                    return string;
                },
                /**
                 * @description: 格式化时间戳为友好时间
                 * @param {int} 秒时间戳
                 * @return {string} 友好时间
                 */
                friendlyTime: function (time) {
                    var now = parseInt(Date.parse(new Date()) / 1000);
                    var todayDate = new Date();
                    var todayTimeStamp = parseInt(Date.parse(new Date(todayDate.getFullYear() + "/" + (todayDate.getMonth() + 1) + '/' + todayDate.getDate() + " 00:00:00")) / 1000);
                    var date = new Date(time * 1000);
                    var y = date.getFullYear(),
                        m = date.getMonth() + 1,
                        d = date.getDate(),
                        h = date.getHours(),
                        i = date.getMinutes(),
                        s = date.getSeconds();
                    if (m < 10) { m = '0' + m; }
                    if (d < 10) { d = '0' + d; }
                    if (h < 10) { h = '0' + h; }
                    if (i < 10) { i = '0' + i; }
                    if (time > todayTimeStamp) {
                        return h + ":" + i;
                    } else if (now - time < 86400 * 365) {
                        return m + "-" + d + " " + h + ":" + i;
                    } else {
                        return y + "-" + m + "-" + d;
                    }
                },
                /**
                 * @description: 上传表情图片前校验
                 * @param {file} file
                 * @return {bool} 是否校验通过
                 */
                doUploadBefore(file) {
                    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('发送图片只能是 JPG/PNG/GIF 格式!');
                        return false;
                    }
                    if (!isLt2M) {
                        this.$message.error('发送图片大小不能超过 2MB!');
                        return false;
                    }
                    return isJPG && isLt2M;
                },
                /**
                 * @description: 上传mp3前校验
                 * @param {file} file
                 * @return {bool} 是否校验通过
                 */
                doUploadMusicBefore(file) {
                    console.log(file.type);
                    const isMp3 = file.type.toLocaleLowerCase() === 'audio/mpeg' || file.type.toLocaleLowerCase() === 'audio/mp3';
                    const isLt8M = file.size / 1024 / 1024 < 8;

                    if (!isMp3) {
                        this.$message.error('音乐只允许上传mp3格式!');
                        return false;
                    }
                    if (!isLt8M) {
                        this.$message.error('上传音乐MP3不允许超过8MB!');
                        return false;
                    }
                    return isMp3 && isLt8M;
                },
                /**
                 * @description: 搜索表情
                 * @param {null}
                 * @return {null}
                 */
                searchImage() {
                    let that = this;
                    that.loadingSearchImage = true;
                    that.request({
                        url: "attach/search",
                        data: {
                            keyword: that.imageKeyword
                        },
                        success(res) {
                            that.loadingSearchImage = false;
                            that.imageList = res.data;
                        },
                        error() {
                            that.loadingSearchImage = false;
                            that.imageList = that.emojiList;
                        }
                    });
                },
                /**
                 * @description: 获取剪切板文件
                 * @param {event} event
                 * @return {null}
                 */
                getClipboardFiles(event) {
                    var that = this;
                    let items = event.clipboardData && event.clipboardData.items;
                    let file = null
                    if (items && items.length) {
                        // 检索剪切板items
                        for (var i = 0; i < items.length; i++) {
                            if (items[i].type.indexOf('image') !== -1) {
                                file = items[i].getAsFile()
                            }
                        }
                    }
                    if (file) {
                        if (that.doUploadBefore(file)) {
                            let param = new FormData();
                            param.append('file', file);
                            param.append('access_token', that.global.baseData.access_token);
                            param.append('plat', that.global.baseData.plat);
                            param.append('version', that.global.baseData.version);
                            let config = {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            }
                            // 添加请求头
                            that.$axios.post(that.uploadImageUrl, param, config)
                                .then(function (res) {
                                    if (res.data.code == 200) {
                                        that.$alert('<img src="' + that.getStaticUrl(res.data.data.attach_path) + '" width="100%" height="100%"/><img src="' + that.getStaticUrl(res.data.data.attach_thumb) + '" width="0" height="0"/>', '是否确认发送这张图片？', {
                                            confirmButtonText: '确认发送',
                                            dangerouslyUseHTMLString: true,
                                        }).then(function () {
                                            that.request({
                                                url: "message/send",
                                                data: {
                                                    where: 'channel',
                                                    to: that.global.room_id,
                                                    type: 'img',
                                                    msg: res.data.data.attach_thumb,
                                                    resource: res.data.data.attach_path,
                                                },
                                                success(res) { }
                                            });
                                        }).catch(function () { });
                                    } else {
                                        that.$message.error(res.data.msg);
                                    }
                                })
                                .catch(function (error) {
                                    that.$message.error("上传图片发生错误");
                                });
                        }
                    }
                    return;
                },
                /**
                 * @description: 监听图片上传完成事件
                 * @param {obj} 服务器返回数据
                 * @param {file} 上传的文件
                 * @return {null}
                 */
                handleImageUploadSuccess(res, file) {
                    var that = this;
                    if (res.code == 200) {

                        that.$alert('<img src="' + that.getStaticUrl(res.data.attach_path) + '" width="100%" height="100%"/><img src="' + that.getStaticUrl(res.data.attach_thumb) + '" width="0" height="0"/>', '是否确认发送这张图片？', {
                            confirmButtonText: '确认发送',
                            dangerouslyUseHTMLString: true,
                        }).then(function () {
                            that.request({
                                url: "message/send",
                                data: {
                                    where: 'channel',
                                    to: that.global.room_id,
                                    type: 'img',
                                    msg: res.data.attach_thumb,
                                    resource: res.data.attach_path,
                                },
                                success(res) {
                                    that.sendAppEvent('sendImg', {
                                        thumb: res.data.attach_thumb,
                                        resource: res.data.attach_path,
                                    });
                                }
                            });
                        }).catch(function () { });
                    } else {
                        that.$message.error(res.msg);
                    }
                },
                /**
                 * @description: 监听MP3上传完成事件
                 * @param {obj} 服务器返回数据
                 * @param {file} 上传的文件
                 * @return {null}
                 */
                handleMusicUploadSuccess(res, file) {
                    let that = this;
                    if (res.code == 200) {
                        let musicPath = res.data.attach_path;
                        that.global.uploadMusicUrl = that.global.staticUrl + 'uploads/' + musicPath;
                        that.global.uploadMusicMid = res.data.attach_id;
                        that.uploadSongForm = true;
                    } else {
                        that.$message.error(res.msg);
                    }
                },
                /**
                 * @description: 新窗口打开URL
                 * @param {string} url
                 * @return {null}
                 */
                openNewWebPage(url) {
                    window.open(url);
                },
                /**
                 * @description: 与服务器同步时间戳
                 * @param {null}
                 * @return {null}
                 */
                updateServerTime() {
                    let that = this;
                    that.request({
                        url: "system/time",
                        success(res) {
                            let serverTime = res.data.time;
                            that.timeDiff = parseInt(new Date().valueOf()) - serverTime;
                            console.log("timeDiff is : " + that.timeDiff + "ms");
                        },
                    });
                },
                /**
                 * @description: 静音和取消静音
                 * @param {null}
                 * @return {null}
                 */
                setEnableOrDisableVolume() {
                    if (this.audioVolume > 0) {
                        //设置静音
                        localStorage.setItem("volume_old", this.audioVolume);
                        this.audioVolume = 0;
                        this.$refs.audio.volume = 0;
                        localStorage.setItem('volume', 0);
                    } else {
                        //取消静音
                        let volume = localStorage.getItem("volume_old") || 30;
                        volume = parseInt(volume);
                        this.audioVolume = volume;
                        this.$refs.audio.volume = parseFloat(volume / 100);
                        localStorage.setItem('volume', volume);
                    }
                    this.sendAppEvent('volumeChanged', {
                        volume: this.audioVolume
                    });
                },
                /**
                 * @description: 显示音量操作条
                 * @param {null}
                 * @return {null}
                 */
                showAudioVolumeBar() {
                    let that = this;
                    that.isVolumeBarShow = true;
                    that.isEnableScroll = true;
                    that.hideVolumeBarAfter5seconds();
                },
                /**
                 * @description: 音量条数据改变
                 * @param {null}
                 * @return {null}
                 */
                audioVolumeChanged() {
                    let that = this;
                    that.$refs.audio.volume = parseFloat(that.audioVolume / 100);
                    localStorage.setItem('volume', that.audioVolume);
                    that.hideVolumeBarAfter5seconds();
                    that.sendAppEvent('volumeChanged', {
                        volume: that.audioVolume
                    });
                },
                /**
                 * @description: 5s后隐藏音量条
                 * @param {null}
                 * @return {null}
                 */
                hideVolumeBarAfter5seconds() {
                    let that = this;
                    clearTimeout(that.timerVolumeBar);
                    that.timerVolumeBar = setTimeout(function () {
                        that.isVolumeBarShow = false;
                    }, 5000);
                },
                /**
                 * @description: 播放进度变更事件
                 * @param {null}
                 * @return {null}
                 */
                audioTimeUpdate() {
                    let that = this;
                    if (that.songInfo && that.$refs.audio.duration > 0 && that.$refs.audio.duration != NaN) {
                        that.audioTimeNow = that.getSongTime(that.$refs.audio.currentTime);
                        that.audioTimeTotal = that.getSongTime(that.$refs.audio.duration);
                        that.audioPercent = parseInt(that.$refs.audio.currentTime / that.$refs.audio.duration * 10000) / 100;
                        if (that.$refs.audio.duration > 0 && that.$refs.audio.duration != NaN) {
                            if (that.musicLrcObj) {
                                for (let i = 0; i < that.musicLrcObj.length; i++) {
                                    if (i == that.musicLrcObj.length - 1) {
                                        that.updateLrcString(that.musicLrcObj[i].lineLyric);
                                        return;
                                    } else {
                                        if (that.$refs.audio.currentTime > that.musicLrcObj[i].time && that.$refs.audio.currentTime < that.musicLrcObj[i + 1].time) {
                                            that.updateLrcString(that.musicLrcObj[i].lineLyric);
                                            return;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    that.updateLrcString('歌词读取中...');
                },
                updateLrcString(str) {
                    if (this.lrcString != str) {
                        this.lrcString = str;
                        this.sendAppEvent('lrcLine', this.lrcString);
                    }
                },
                /**
                 * @description: Audio播放完毕
                 * @param {null}
                 * @return {null}
                 */
                audioEnded() {
                    let that = this;
                    that.audioResetImage();
                    if (that.roomInfo && that.roomInfo.room_type == 4 && that.roomInfo.room_playone) {
                        that.playMusic();
                    }
                },
                /**
                 * @description: Audio播放失败,可能需要替换为本地播放地址
                 * @param {null}
                 * @return {null}
                 */
                audioError() {
                    let that = this;
                    that.audioResetImage();
                    if (that.audioRetryTimes < 5) {
                        if (that.audioUrl) {
                            console.log("歌曲加载失败,正在准备重试");
                            setTimeout(function () {
                                that.$refs.audio.src = that.getStaticUrl("music/" + that.songInfo.song.mid + ".jpg");
                                that.audioRetryTimes++;
                            }, 500);
                        }
                    } else {
                        console.error("尝试了5次,还是加载不出来了...");
                    }
                },
                /**
                 * @description: 重置播放器图片为Loading
                 * @param {null}
                 * @return {null}
                 */
                audioResetImage() {
                    this.audioImage = this.getStaticUrl('new/images/loading.png');
                },
                /**
                 * @description: Audio加载成功
                 * @param {null}
                 * @return {null}
                 */
                audioLoaded() {
                    let that = this;
                    let nowTimeStamps = parseInt((new Date().valueOf() - that.timeDiff) / 1000);
                    let now = 0;
                    switch (that.roomInfo.room_type) {
                        case 1:
                        case 2:
                        case 4:
                            now = parseFloat((nowTimeStamps - that.songInfo.since)).toFixed(2);
                            if (now >= that.$refs.audio.duration && that.$refs.audio.duration > 0) {
                                that.audioUrl = '';
                                that.songInfo = false;
                                return;
                            }
                            if (now < 5) {
                                now = 0;
                            }
                            that.$refs.audio.currentTime = now < 0 ? 0 : now;
                            that.audioImage = decodeURIComponent(that.songInfo.user.user_head);
                            break;
                        default:
                    }
                    that.audioTimeNow = that.getSongTime(that.$refs.audio.currentTime);
                    that.audioTimeTotal = that.getSongTime(that.$refs.audio.duration);
                    that.sendAppEvent('playSong', {
                        data: that.songInfo,
                        start: that.$refs.audio.currentTime,
                        total: that.$refs.audio.duration
                    });
                },
                /**
                 * @description: 可以播放事件 开始播放
                 * @param {null} 
                 * @return {null} 
                 */
                canplay() {
                    this.$refs.audio.play();
                },
                /**
                 * @description: 获取引用消息的标签
                 * @param {obj} 引用的消息
                 * @return {string} 显示字符串
                 */
                getQuotMessage(itemAt) {
                    if (!itemAt.message) {
                        return false;
                    }
                    switch (itemAt.message.type) {
                        case 'jump':
                            return '[机票]';
                            break;
                        case 'img':
                            return '[图片]';
                            break;
                        case 'link':
                            return '[链接]';
                            break;
                        default:
                            return this.urldecode(itemAt.message.content);
                    }
                },
                /**
                 * @description: 读取音乐歌词
                 * @param {null}
                 * @return {null}
                 */
                getMusicLrc() {
                    let that = this;
                    that.musicLrcObj = {};
                    that.lrcString = '歌词读取中...';
                    that.request({
                        url: 'song/getLrc',
                        data: {
                            mid: that.songInfo.song.mid
                        },
                        success(res) {
                            that.musicLrcObj = res.data;
                            that.sendAppEvent("lrc", res.data);
                        },
                    });
                },
                /**
                 * @description: 播放音乐
                 * @param {null}
                 * @return {null}
                 */
                playMusic() {
                    let that = this;
                    that.getMusicLrc();
                    that.audioRetryTimes = 0;
                    that.$nextTick(function () {
                        that.audioStartPlay();
                    });
                },
                /**
                 * @description: 播放系统提示音
                 * @param {null}
                 * @return {null}
                 */
                playSystemAudio() {
                    this.$refs.noticePlayer.play();
                },
                /**
                 * @description: 尝试播放 可能因为没加载完报错
                 * @param {null}
                 * @return {null}
                 */
                audioStartPlay() {
                    try {
                        this.$refs.audio.load();
                    } catch (e) { }
                },
                /**
                 * @description: 消息输入框输入变更
                 * @param {event} 输入框事件
                 * @return {null}
                 */
                messageChanged(e) {
                    let that = this;
                    if (that.message == "@" + decodeURIComponent(that.atUserInfo.user_name)) {
                        that.message = '';
                        that.atUserInfo = false;
                    } else if (that.message == '') {
                        that.message = '';
                        that.atUserInfo = false;
                    }
                    if (that.message.length > 0) {
                        that.isEnableSendMessage = true;
                    } else {
                        that.isEnableSendMessage = false;
                    }
                },
                /**
                 * @description: 消息列表滚动事件
                 * @param {event} 滚动事件
                 * @return {null}
                 */
                onMessageScroll(e) {
                    let that = this;
                    if (e.target.scrollHeight - e.target.scrollTop < e.target.clientHeight + 50 && !that.bbbug_loading) {
                        that.isEnableScroll = true;
                    } else {
                        that.isEnableScroll = false;
                    }
                    that.isVolumeBarShow = false;
                },
                /**
                 * @description: 显示修改我的资料页面
                 * @param {null}
                 * @return {null}
                 */
                openMySetting() {
                    if (this.dialog.MySetting) {
                        this.hideAll();
                    } else {
                        this.hideAll();
                        this.dialog.MySetting = true;
                    }
                },
                /**
                 * @description: 显示我的歌曲列表
                 * @param {null}
                 * @return {null}
                 */
                showMySongList() {
                    if (this.dialog.MySongList) {
                        this.hideAll();
                    } else {
                        this.hideAll();
                        this.dialog.MySongList = true;
                    }
                },
                /**
                 * @description: 显示搜索歌曲页面
                 * @param {null}
                 * @return {null}
                 */
                showSearchSongs() {
                    if (this.dialog.SearchSongs) {
                        this.hideAll();
                    } else {
                        this.hideAll();
                        this.dialog.SearchSongs = true;
                    }
                },
                /**
                 * @description: 显示正在播放的列表
                 * @param {null}
                 * @return {null}
                 */
                showPlaySongList() {
                    if (this.dialog.PlayingSongList) {
                        this.hideAll();
                    } else {
                        this.hideAll();
                        this.dialog.PlayingSongList = true;
                    }
                },
                /**
                 * @description: 显示房间列表
                 * @param {null}
                 * @return {null}
                 */
                showRoomList() {
                    if (this.dialog.RoomList) {
                        this.hideAll();
                    } else {
                        this.hideAll();
                        this.dialog.RoomList = true;
                    }
                },
                /**
                 * @description: 显示系统设置
                 * @param {null}
                 * @return {null}
                 */
                showSystemSetting() {
                    if (this.dialog.SystemSetting) {
                        this.hideAll();
                    } else {
                        this.hideAll();
                        this.dialog.SystemSetting = true;
                    }
                },
                /**
                 * @description: 显示房间设置
                 * @param {null}
                 * @return {null}
                 */
                openRoomSetting() {
                    if (this.dialog.RoomSetting) {
                        this.hideAll();
                    } else {
                        this.hideAll();
                        this.dialog.RoomSetting = true;
                    }
                },
                /**
                 * @description: 隐藏所有窗口
                 * @param {null}
                 * @return {null}
                 */
                hideAll() {
                    this.isEmojiBoxShow = false;
                    this.closeMenu();
                    this.global.songKeyword = '';
                    this.dialog = {
                        MySetting: false,
                        MySongList: false,
                        OnlineList: false,
                        PlayingSongList: false,
                        Profile: false,
                        RoomCreate: false,
                        RoomList: false,
                        RoomPassword: false,
                        RoomSetting: false,
                        SearchSongs: false,
                        SystemSetting: false,
                        Login: false,
                    };
                },
                /**
                 * @description: 隐藏表情和歌曲卡片
                 * @param {null}
                 * @return {null}
                 */
                hideAllDialog() {
                    this.isEmojiBoxShow = false;
                    this.closeMenu();
                },
                /**
                 * @description: 显示表情卡片
                 * @param {null}
                 * @return {null}
                 */
                showEmojiBox() {
                    this.closeMenu();
                    this.isEmojiBoxShow = !this.isEmojiBoxShow;
                    if (this.isEmojiBoxShow) {
                        this.imageList = this.emojiList;
                        this.loadingSearchImage = false;
                    }
                },
                /**
                 * @description: 获取图片宽度
                 * @param {string} 图片地址
                 * @return {int} 图片宽度
                 */
                getImageWidth(url) {
                    if (url.indexOf('/images/emoji/') > 0) {
                        return 60;
                    } else {
                        return 200;
                    }
                },
                /**
                 * @description: 发送图片
                 * @param {string} 图片URL
                 * @return {null}
                 */
                sendEmoji(url) {
                    let that = this;
                    that.request({
                        url: "message/send",
                        data: {
                            where: 'channel',
                            to: that.global.room_id,
                            type: 'img',
                            msg: url,
                            resource: url,
                        },
                        success(res) {
                            that.sendAppEvent('sendEmoji', {
                                thumb: url,
                                resource: url,
                            });
                            that.isEmojiBoxShow = false;
                        }
                    });
                },
                /**
                 * @description: 发送消息
                 * @param {event} 输入框事件
                 * @return {null}
                 */
                sendMessage(e = false) {
                    let that = this;
                    if (e) {
                        e.preventDefault();
                    }
                    if (that.message == '') {
                        return;
                    }

                    if (e.keyCode && e.keyCode == 13 && e.ctrlKey) {
                        that.hideAll();
                        that.global.songKeyword = that.message;
                        that.dialog.SearchSongs = true;
                        return;
                    }


                    let message = that.message;
                    that.message = '';
                    that.isEnableSendMessage = false;
                    if (that.messageList.length > that.historyMax) {
                        that.messageList.shift();
                    }
                    let _tempMessage = {
                        type: "text",
                        user: that.userInfo,
                        at: that.atUserInfo,
                        content: encodeURIComponent(message),
                        time: parseInt(new Date().valueOf() / 1000),
                        loading: 1,
                    };
                    that.messageList.push(_tempMessage);
                    that.autoScroll();
                    message = message.replace('@' + decodeURIComponent(that.atUserInfo.user_name) + ' ', '').replace('@' + decodeURIComponent(that.atUserInfo.user_name), '');
                    that.request({
                        url: "message/send",
                        data: {
                            at: that.atUserInfo,
                            where: 'channel',
                            to: that.global.room_id,
                            type: 'text',
                            msg: encodeURIComponent(message),
                        },

                        success(res) {
                            that.atUserInfo = false;
                            that.isEnableScroll = true;
                            that.autoScroll();
                            that.sendAppEvent('sendText', {
                                text: message,
                            });
                        },
                        error(res) {
                            for (let i = that.messageList.length - 1; i >= 0; i--) {
                                if (that.messageList[i].loading == 1) {
                                    that.messageList.splice(i, 1);
                                    break;
                                }
                            }
                        }
                    });
                },
                /**
                 * @description: 全局监听器
                 * @param {string} 执行方法名
                 * @return {null}
                 */
                AppController(data) {
                    eval("this." + data + "()");
                },
                /**
                 * @description: 隐藏全局Loading
                 * @param {null}
                 * @return {null}
                 */
                hideLoading() {
                    this.appLoading = false;
                },
                /**
                 * @description: 获取我的资料
                 * @param {null}
                 * @return {null}
                 */
                getUserInfo() {
                    let that = this;
                    that.request({
                        url: "user/getmyinfo",
                        success(res) {
                            that.userInfo = res.data;
                            that.global.userInfo = that.userInfo;
                            that.getRoomInfo();
                        }
                    });
                },
                /**
                 * @description: 进入指定房间
                 * @param {int} 房间ID
                 * @return {null}
                 */
                enterRoom(room_id) {
                    let that = this;
                    that.$confirm('是否确认退出当前房间并进入这个房间?', '换房提醒', {
                        confirmButtonText: '进入',
                        cancelButtonText: '取消',
                        closeOnClickModal: false,
                        closeOnPressEscape: false,
                        type: 'warning'
                    }).then(function () {
                        localStorage.setItem('room_change_id', room_id);
                        that.getRoomInfo();
                    }).catch(function () { });
                },
                /**
                 * @description: 切换到选择的房间 从缓存读取
                 * @param {null}
                 * @return {null}
                 */
                changeRoom() {
                    let that = this;
                    that.hideAll();
                    that.getRoomInfo();
                },
                /**
                 * @description: 获取房间聊天记录
                 * @param {null}
                 * @return {null}
                 */
                getRoomHistory() {
                    let that = this;
                    that.request({
                        url: "message/getMessageList",
                        data: {
                            room_id: that.global.room_id,
                            per_page: 20,
                        },
                        success(res) {
                            that.messageList = [];
                            for (let i = 0; i < res.data.length; i++) {
                                let _obj = false;
                                try {
                                    _obj = JSON.parse(res.data[i].message_content);
                                } catch (error) {
                                    continue;
                                }
                                if (_obj) {
                                    if (_obj.at) {
                                        _obj.content = '@' + _obj.at.user_name + " " + _obj.content;
                                    }
                                    _obj.time = res.data[i].message_createtime;
                                    _obj.isAtAll = false;
                                    if (_obj.type == 'text') {
                                        try {
                                            _obj.content = decodeURIComponent(decodeURIComponent(_obj.content));
                                        } catch (e) {
                                            _obj.content = decodeURIComponent(_obj.content);
                                        }
                                        _obj.isAtAll = _obj.content.indexOf('@全体') == 0 && (_obj.user.user_id == that.roomInfo.room_user || _obj.user.user_admin) ? true : false;
                                    }
                                    that.messageList.unshift(_obj);
                                }
                            }
                            if (that.messageList.length > that.historyMax) {
                                that.messageList.shift();
                            }
                            let roomAdminInfo = Object.assign({}, that.global.roomInfo.admin);
                            let _tempMessage = {
                                type: "notice",
                                content: encodeURIComponent(that.global.roomInfo.room_notice ? that.global.roomInfo.room_notice : ('欢迎来到' + that.global.roomInfo.room_name + '!')),
                                where: "channel",
                                at: null,
                                message_id: 0,
                                time: parseInt(new Date().valueOf() / 1000),
                                user: roomAdminInfo
                            };
                            that.messageList.push(_tempMessage);
                            if (that.roomInfo.room_id == 888 && that.userInfo.user_id < 0) {
                                that.messageList.push({
                                    type: "text",
                                    content: encodeURIComponent('临时用户你好，我们强烈建议你登录进来跟我们一起划水听歌聊天呀~'),
                                    where: "channel",
                                    at: roomAdminInfo,
                                    message_id: 0,
                                    time: parseInt(new Date().valueOf() / 1000),
                                    user: roomAdminInfo
                                });
                            }
                            that.autoScroll();
                        }
                    });
                },
                /**
                 * @description: 用户头像下拉点击事件
                 * @param {obj} 点击行
                 * @param {obj} 命令
                 * @return {obj} 返回对象
                 */
                beforeHandleUserCommand(row, command) {
                    return {
                        "row": row,
                        "command": command
                    }
                },
                /**
                 * @description: 输入框获取焦点
                 * @param {null}
                 * @return {null} 
                 */
                focusInput() {
                    const textarea = document.querySelector(".bbug_main_chat_input_message");
                    textarea.focus();
                },
                /**
                 * @description: at用户
                 * @param {null}
                 * @return {null} 
                 */
                atUser() {
                    if (this.global.atUserInfo) {
                        this.atUserInfo = this.global.atUserInfo;
                        this.message = '@' + decodeURIComponent(this.atUserInfo.user_name) + " " + this.message;
                        this.focusInput();
                    }
                },
                /**
                 * @description: 摸一摸指定用户
                 * @param {int} 用户ID
                 * @return {null} 
                 */
                doTouch(user_id) {
                    let that = this;
                    that.request({
                        url: "message/touch",
                        data: {
                            at: user_id,
                            room_id: that.global.room_id
                        },
                        success(res) {
                            that.sendAppEvent('touch', {
                                user_id: user_id
                            });
                            that.$message.success(res.msg);
                        }
                    });
                },
                /**
                 * @description: 撤回消息
                 * @param {obj} 消息体
                 * @return {null} 
                 */
                sendBackMessage(message) {
                    let that = this;
                    that.request({
                        url: "message/back",
                        data: {
                            message_id: message.message_id,
                            room_id: that.global.room_id
                        }
                    });
                },
                /**
                 * @description: 引用消息
                 * @param {obj} 消息体
                 * @return {null} 
                 */
                quotMessage(message) {
                    let that = this;
                    message = Object.assign({}, message);
                    that.atUserInfo = {
                        user_id: message.user.user_id,
                        user_name: message.user.user_name,
                        message: message
                    };
                    this.message = '@' + decodeURIComponent(this.atUserInfo.user_name) + " " + that.message;
                    this.focusInput();
                },
                /**
                 * @description: 用户头像下拉点击回调
                 * @param {obj} 命令对象
                 * @return {null} 
                 */
                commandUserHead(cmd) {
                    let that = this;
                    switch (cmd.command) {
                        case 'at':
                            that.atUserInfo = {
                                user_id: cmd.row.user_id,
                                user_name: cmd.row.user_name
                            };
                            that.message = '@' + decodeURIComponent(cmd.row.user_name) + " " + that.message;
                            this.focusInput();
                            break;
                        case 'touch':
                            that.doTouch(cmd.row.user_id);
                            break;
                        case 'pullback':
                            that.request({
                                url: "message/back",
                                data: {
                                    message_id: cmd.row.message_id,
                                    room_id: that.global.room_id
                                }
                            });
                            break;
                        case 'sendSong':
                            that.global.atSongUserInfo = cmd.row;
                            that.hideAll();
                            that.dialog.SearchSongs = true;
                            break;
                        case 'shutdown':
                            that.request({
                                url: "user/shutdown",
                                data: {
                                    user_id: cmd.row.user_id,
                                    room_id: that.global.room_id
                                }
                            });
                            break;
                        case 'songdown':
                            that.request({
                                url: "user/songdown",
                                data: {
                                    user_id: cmd.row.user_id,
                                    room_id: that.global.room_id
                                }
                            });
                            break;
                        case 'removeBan':
                            that.request({
                                url: "user/removeban",
                                data: {
                                    user_id: cmd.row.user_id,
                                    room_id: that.global.room_id
                                },
                                success(res) {
                                    that.$message.success(res.msg);
                                }
                            });
                            break;
                        case 'profile':
                            that.global.profileUserId = cmd.row.user_id;
                            that.hideAll();
                            that.$nextTick(function () {
                                that.hideAll();
                                that.dialog.Profile = true;
                            });
                            break;
                        case 'sendSong':
                            break;
                        default:
                            that.$message.error('即将上线，敬请期待');
                    }
                },
                /**
                 * @description: 显示指定用户主页
                 * @param {int} 用户ID
                 * @return {null} 
                 */
                showUserPage(user_id) {
                    let that = this;
                    that.global.profileUserId = user_id;
                    that.hideAll();
                    that.$nextTick(function () {
                        that.hideAll();
                        that.dialog.Profile = true;
                    });
                },
                /**
                 * @description: 显示在线列表
                 * @param {null}
                 * @return {null} 
                 */
                showOnlineList() {
                    if (this.dialog.OnlineList) {
                        this.hideAll();
                    } else {
                        this.hideAll();
                        this.dialog.OnlineList = true;
                    }
                },
                /**
                 * @description: 自动滚动到底部
                 * @param {null}
                 * @return {null} 
                 */
                autoScroll() {
                    let that = this;
                    if (!that.isLocked && !that.roomInfo.room_fullpage) {
                        that.$nextTick(function () {
                            if (that.isEnableScroll) {
                                let ele = document.getElementById('bbbug_main_chat_history');
                                ele.scrollTop = ele.scrollHeight;
                            }
                        });
                    }
                },
                /**
                 * @description: 获取房间信息
                 * @param {bool} 是否重新连接(默认true)
                 * @return {null} 
                 */
                getRoomInfo(reConnect = true) {
                    let that = this;
                    if (reConnect) {
                        that.appLoading = true;
                    }
                    that.request({
                        url: "room/getRoomInfo",
                        data: {
                            room_id: localStorage.getItem('room_change_id') || that.global.room_id,
                            room_password: that.global.room_password
                        },
                        success(res) {
                            that.isLrcStringShow = true;
                            that.isPlayerShow = true;
                            document.title = res.data.room_name;
                            localStorage.setItem('room_change_id', res.data.room_id);
                            that.global.room_id = res.data.room_id;
                            that.global.roomInfo = res.data;
                            that.updateCopyData();
                            that.roomInfo = res.data;
                            if(that.roomInfo.room_app && that.roomInfo.room_fullpage){
                                that.isAppOpen = false;
                                that.isAppOpenToggle();
                                //强制打开APP
                            }
                            that.background = res.data.room_background || "new/images/bg_dark.jpg";
                            if (reConnect) {
                                that.audioUrl = '';
                                that.songInfo = null;
                                that.getRoomHistory();
                                that.getWebsocketUrl();
                                let room_history = localStorage.getItem('room_history') || false;
                                if (room_history) {
                                    room_history = JSON.parse(room_history);
                                } else {
                                    room_history = [];
                                }
                                if (room_history.length > 2) {
                                    room_history.unshift();
                                }

                                for (let i = 0; i < room_history.length; i++) {
                                    if (room_history[i].room_id == res.data.room_id) {
                                        room_history.splice(i, 1);
                                    }
                                }
                                room_history.unshift({
                                    value: "ID: " + res.data.room_id + " " + res.data.room_name,
                                    room_id: res.data.room_id
                                });
                                localStorage.setItem("room_history", JSON.stringify(room_history));
                            } else {
                                let roomAdminInfo = Object.assign({}, that.global.roomInfo.admin);
                                let _tempMessage = {
                                    type: "notice",
                                    content: encodeURIComponent(that.global.roomInfo.room_notice ? that.global.roomInfo.room_notice : ('欢迎来到' + that.global.roomInfo.room_name + '!')),
                                    where: "channel",
                                    at: null,
                                    message_id: 0,
                                    time: parseInt(new Date().valueOf() / 1000),
                                    user: roomAdminInfo
                                };
                                that.messageList.push(_tempMessage);
                                that.autoScroll();
                            }
                        },
                        error(res) {
                            that.appLoading = false;
                            switch (res.code) {
                                case 302:
                                    if (that.global.roomInfo) {
                                        that.hideAll();
                                        that.dialog.RoomPassword = true;
                                    } else {
                                        localStorage.setItem('room_change_id', 888);
                                        that.getRoomInfo();
                                    }
                                    break;
                                default:
                                    localStorage.setItem('room_change_id', 888);
                                    that.getRoomInfo();
                            }
                        }
                    });
                },
                /**
                 * @description: 更新剪切板数据
                 * @param {null}
                 * @return {null} 
                 */
                updateCopyData() {
                    let that = this;
                    that.copyData = '快来 ' + that.roomInfo.room_name + " 一起听歌玩耍呀!\n";
                    if (that.songInfo && that.songInfo.song) {
                        if (that.songInfo.user.user_id == 1) {
                            that.copyData = that.roomInfo.room_name + ' 正在播放 ' + that.songInfo.song.name + "(" + that.songInfo.song.singer + ")快来一起听听吧~\n";
                        } else {
                            that.copyData = decodeURIComponent(that.songInfo.user.user_name) + " 在 " + that.roomInfo.room_name + ' 点了一首 ' + that.songInfo.song.name + "(" + that.songInfo.song.singer + ")快来一起听听吧~\n";
                        }
                    }
                    that.copyData += location.origin + "/" + that.roomInfo.room_id;
                },
                /**
                 * @description: 切掉当前播放的歌曲
                 * @param {null}
                 * @return {null} 
                 */
                passTheSong() {
                    let that = this;
                    if (!that.songInfo) {
                        return;
                    }

                    that.request({
                        url: "song/pass",
                        data: {
                            room_id: that.global.room_id,
                            mid: that.songInfo.song.mid
                        },
                        success(res) {
                            // that.audioUrl = '';
                            that.audioImage = that.getStaticUrl('new/images/loading.png');
                            that.$message.success(res.msg);
                        }
                    });
                },
                /**
                 * @description: 收藏当前播放的歌曲
                 * @param {null}
                 * @return {null} 
                 */
                loveTheSong() {
                    let that = this;
                    if (!that.songInfo) {
                        return;
                    }
                    that.request({
                        url: "song/addMySong",
                        data: {
                            room_id: that.global.room_id,
                            mid: that.songInfo.song.mid
                        },
                        success(res) {
                            that.sendAppEvent('addFavSong', {
                                song: that.songInfo
                            });
                        }
                    });
                },
                /**
                 * @description: 获取当前的websocket连接地址
                 * @param {null}
                 * @return {null} 
                 */
                getWebsocketUrl() {
                    let that = this;
                    that.request({
                        url: "room/getWebsocketUrl",
                        data: {
                            channel: that.global.room_id,
                            referer: document.referrer || false
                        },
                        success(res) {
                            that.appLoading = false;
                            that.websocket.url = that.global.wssUrl + '?account=' + res.data.account + "&channel=" + res.data.channel + "&ticket=" + res.data.ticket;
                            if (that.doForceCloseWebsocket()) {
                                that.connectWebsocket();
                            }
                        },
                        error() {
                            that.appLoading = false;
                        }
                    });
                },
                /**
                 * @description: 添加系统消息
                 * @param {string} 消息内容
                 * @param {string} 消息颜色(#999)
                 * @param {string} 背景色(transparent)
                 * @return {null}
                 */
                addSystemMessage(msg, color = "#999", bgColor = "transparent") {
                    let that = this;
                    if (that.messageList.length > that.historyMax) {
                        that.messageList.shift();
                    }
                    that.messageList.push({
                        type: "system",
                        content: msg,
                        bgColor: bgColor,
                        color: color
                    });
                },
                /**
                 * @description: Chrome通知
                 * @param {string} 标题
                 * @param {string} 内容
                 * @return {null}
                 */
                chromeNotify(title, content) {
                    if (window.Notification && Notification.permission !== "denied") {
                        Notification.requestPermission(function (status) { // 请求权限
                            if (status === 'granted') {
                                // 弹出一个通知
                                var n = new Notification(title, {
                                    body: content,
                                    icon: ""
                                });
                                // 两秒后关闭通知
                                setTimeout(function () {
                                    n.close();
                                }, 5000);
                            }
                        });
                    }
                },
                /**
                 * @description: 消息控制器
                 * @param {string} 收到的JSON数据包
                 * @return {null}
                 */
                messageController(data) {
                    let that = this;
                    try {
                        let obj = {};
                        //这里有点尴尬
                        try {
                            obj = JSON.parse(data);
                        } catch (e) {
                            return;
                        }
                        if (that.roomInfo.room_fullpage) {
                            //插件自行接管消息
                            switch (obj.type) {
                                case 'preload':
                                case 'playSong':
                                case 'online':
                                case 'roomUpdate':
                                    break;
                                default:
                                    that.sendAppEvent('messageController', {
                                        data: obj
                                    });
                                    return;
                            }
                        }
                        if (that.messageList.length > that.historyMax) {
                            that.messageList.shift();
                        }
                        obj.time = parseInt(new Date().valueOf() / 1000);

                        // 更新当前歌曲数量
                        if (!isNaN(obj.count)) {
                            that.songCount = obj.count;
                        }

                        switch (obj.type) {
                            case 'preload':
                                that.nextAudioUrl = obj.url;
                                that.$nextTick(function () {
                                    that.$refs.noticePlayer.load();
                                });
                                break;
                            case 'touch':
                                that.addSystemMessage(that.urldecode(obj.user.user_name) + " 摸了摸 " + that.urldecode(obj.at.user_name) + obj.at.user_touchtip, '#999', '#eee');
                                if (obj.at) {
                                    if (obj.at.user_id == that.userInfo.user_id) {
                                        let notifyTitle = "摸一摸";
                                        let notifyContent = that.urldecode(obj.user.user_name) + " 摸了摸你" + that.urldecode(obj.at.user_touchtip);
                                        if (that.isEnableTouchNotice) {
                                            that.$notify({
                                                title: notifyTitle,
                                                message: notifyContent,
                                                duration: 10000,
                                                dangerouslyUseHTMLString: true
                                            });
                                        }
                                        if (that.isEnableNotification) {
                                            that.chromeNotify(notifyTitle, notifyContent);
                                        }
                                        if (that.isEnableNoticePlayer) {
                                            that.playSystemAudio()
                                        }
                                    }
                                }
                                break;
                            case 'clear':
                                that.messageList = [];
                                that.addSystemMessage("管理员" + that.urldecode(obj.user.user_name) + "清空了你的聊天记录", '#f00', '#eee');
                                break;
                            case 'text':
                                try {
                                    obj.content = decodeURIComponent(decodeURIComponent(obj.content));
                                } catch (e) {
                                    obj.content = decodeURIComponent(obj.content);
                                }
                                if (obj.at) {
                                    try {
                                        obj.at.content = decodeURIComponent(decodeURIComponent(obj.content));
                                    } catch (e) {
                                        obj.content = decodeURIComponent(obj.content);
                                    }
                                }

                                obj.isAtAll = (obj.content).indexOf('@全体') == 0 && (obj.user.user_id == that.roomInfo.room_user || obj.user.user_admin) ? true : false;
                                if (obj.user.user_id == that.userInfo.user_id) {
                                    for (let i = that.messageList.length - 1; i >= 0; i--) {
                                        if (that.messageList[i].loading == 1) {
                                            that.messageList.splice(i, 1);
                                            break;
                                        }
                                    }
                                }
                                if (obj.user.user_id == 110) {
                                    if (obj.content == 'clear') {
                                        that.messageList = [];
                                        that.addSystemMessage("管理员" + that.urldecode(obj.user.user_name) + "清空了你的聊天记录", '#f00', '#eee');
                                        return;
                                    }
                                    if (obj.content == 'reload') {
                                        that.addSystemMessage("管理员" + that.urldecode(obj.user.user_name) + "刷新了你的页面", '#f00', '#eee');

                                        location.replace(location.href);
                                        return;
                                    }
                                }
                                if ((obj.user.user_id == that.roomInfo.room_user || obj.user.user_admin) && obj.isAtAll) {
                                    let notifyTitle = that.urldecode(obj.user.user_name) + "@全体：";
                                    let notifyContent = that.urldecode(obj.content);
                                    that.$notify({
                                        title: notifyTitle,
                                        message: notifyContent,
                                        duration: 10000,
                                        dangerouslyUseHTMLString: true
                                    });
                                    if (that.isEnableNotification) {
                                        that.chromeNotify(notifyTitle, notifyContent);
                                    }
                                    if (that.isEnableNoticePlayer) {
                                        that.playSystemAudio()
                                    }
                                }
                                if (obj.at) {
                                    if (obj.at.user_id == that.userInfo.user_id || obj.isAtAll) {
                                        let notifyTitle = that.urldecode(obj.user.user_name) + "@了你：";
                                        let notifyContent = that.urldecode(obj.content);
                                        if (that.isEnableAtNotification) {
                                            that.$notify({
                                                title: notifyTitle,
                                                message: notifyContent,
                                                duration: 10000,
                                                dangerouslyUseHTMLString: true
                                            });
                                        }
                                        if (that.isEnableNotification) {
                                            that.chromeNotify(notifyTitle, notifyContent);
                                        }
                                        if (that.isEnableNoticePlayer) {
                                            that.playSystemAudio()
                                        }
                                    }
                                    obj.content = '@' + obj.at.user_name + " " + obj.content;
                                }
                                that.messageList.push(obj);
                                document.title = that.urldecode(obj.user.user_name) + "说：" + that.urldecode(obj.content);
                                clearTimeout(that.timerForWebTitle);
                                that.callParentFunction('onTextMessage', obj);
                                that.timerForWebTitle = setTimeout(function () {
                                    document.title = that.roomInfo.room_name;
                                }, 3000);
                                break;
                            case 'link':
                            case 'img':
                            case 'jump':
                                if (obj.user.user_id == that.userInfo.user_id) {
                                    for (let i = that.messageList.length - 1; i >= 0; i--) {
                                        if (that.messageList[i].loading == 1) {
                                            that.messageList.splice(i, 1);
                                            break;
                                        }
                                    }
                                }
                                if (that.messageList.length > that.historyMax) {
                                    that.messageList.shift();
                                }
                                that.messageList.push(obj);
                                that.sendAppEvent('jump', {
                                    data: obj
                                });
                                break;
                            case 'system':
                                if (that.messageList.length > that.historyMax) {
                                    that.messageList.shift();
                                }
                                that.messageList.push(obj);
                                break;
                            case 'join':
                                if (that.messageList.length > that.historyMax) {
                                    that.messageList.shift();
                                }
                                that.messageList.push(obj);
                                that.sendAppEvent('join', {
                                    data: obj
                                });
                                break;
                                // case 'join':
                                //     that.addSystemMessage(obj.content);
                                break;
                            case 'addSong':
                                that.sendAppEvent('addSong', {
                                    data: obj
                                });
                                if (obj.at) {
                                    that.addSystemMessage(that.urldecode(obj.user.user_name) + " 送了一首 《" + obj.song.name + "》(" + obj.song.singer + ") 给 " + that.urldecode(obj.at.user_name), '#409EFF', '#eee');
                                    if (obj.at.user_id == that.userInfo.user_id) {
                                        let notifyTitle = that.urldecode(obj.user.user_name) + "送了歌给你：";
                                        let notifyContent = "《" + obj.song.name + "》(" + obj.song.singer + ")";

                                        that.$notify({
                                            title: notifyTitle,
                                            message: notifyContent,
                                            duration: 5000,
                                            dangerouslyUseHTMLString: true
                                        });
                                        if (that.isEnableNotification) {
                                            that.chromeNotify(notifyTitle, notifyContent);
                                        }
                                        if (that.isEnableNoticePlayer) {
                                            that.playSystemAudio()
                                        }
                                    }
                                } else {
                                    that.addSystemMessage(that.urldecode(obj.user.user_name) + " 点了一首 《" + obj.song.name + "》(" + obj.song.singer + ")");
                                }
                                break;
                            case 'push':
                                that.sendAppEvent('pushSong', {
                                    data: obj
                                });
                                that.addSystemMessage(that.urldecode(obj.user.user_name) + " 顶了下《" + obj.song.name + "》(" + obj.song.singer + ")");

                                break;
                            case 'removeSong':
                                that.sendAppEvent('removeSong', {
                                    data: obj
                                });
                                that.addSystemMessage(that.urldecode(obj.user.user_name) + " 将歌曲 《" + obj.song.name + "》(" + obj.song.singer + ") 从队列移除");
                                break;
                            case 'removeban':
                                that.sendAppEvent('removeban', {
                                    data: obj
                                });
                                that.addSystemMessage(that.urldecode(obj.user.user_name) + " 将 " + that.urldecode(obj.ban.user_name) + " 解禁");

                                break;
                            case 'shutdown':
                                that.sendAppEvent('shutdown', {
                                    data: obj
                                });
                                that.addSystemMessage(that.urldecode(obj.user.user_name) + " 禁止了用户 " + that.urldecode(obj.ban.user_name) + " 发言");

                                break;
                            case 'songdown':
                                that.sendAppEvent('songdown', {
                                    data: obj
                                });
                                that.addSystemMessage(that.urldecode(obj.user.user_name) + " 禁止了用户 " + that.urldecode(obj.ban.user_name) + " 点歌");

                                break;
                            case 'guest_remove':
                                that.sendAppEvent('removeGuest', {
                                    data: obj
                                });
                                that.addSystemMessage(that.urldecode(obj.user.user_name) + " 取消了用户 " + that.urldecode(obj.guest.user_name) + " 嘉宾身份");

                                break;
                            case 'guest_add':
                                that.sendAppEvent('addGuest', {
                                    data: obj
                                });
                                that.addSystemMessage(that.urldecode(obj.user.user_name) + " 为用户 " + that.urldecode(obj.guest.user_name) + " 设置了嘉宾身份");

                                break;
                            case 'pass':
                                that.musicLrcObj = {};
                                that.$refs.audio.stop();
                                that.sendAppEvent('passSong', {
                                    data: obj
                                });
                                that.addSystemMessage(that.urldecode(obj.user.user_name) + " 切掉了当前播放的歌曲 《" + obj.song.name + "》(" + obj.song.singer + ") ");
                                break;
                            case 'all':
                                that.addSystemMessage(obj.content, '#fff', '#666');
                                break;
                            case 'back':
                                that.sendAppEvent('msgBack', {
                                    data: obj
                                });
                                for (let i = 0; i < that.messageList.length; i++) {
                                    if (parseInt(that.messageList[i].message_id) == parseInt(obj.message_id)) {
                                        that.messageList.splice(i, 1);
                                        break;
                                    }
                                }
                                that.addSystemMessage(that.urldecode(obj.user.user_name) + " 撤回了一条消息");
                                break;
                            case 'playSong':
                                if (obj.song) {
                                    obj.song.pic = obj.song.pic.replace('http://', 'https://');
                                    that.songInfo = obj;
                                    that.audioUrl = that.global.apiUrl + "/api/song/playurl?mid=" + obj.song.mid;
                                    that.updateCopyData();
                                    that.playMusic();
                                    if (obj.song.mid < 0) {
                                        that.addSystemMessage('正在播放 ' + decodeURIComponent(obj.user.user_name) + ' 上传的歌曲《' + obj.song.name + '》(' + obj.song.singer + ')');
                                    }
                                    if (obj.user.user_id == that.userInfo.user_id) {
                                        let notifyTitle = "正在播放你点的歌";
                                        let notifyContent = "《" + obj.song.name + "》(" + obj.song.singer + ")";
                                        that.$notify({
                                            title: notifyTitle,
                                            message: notifyContent,
                                            duration: 5000,
                                            dangerouslyUseHTMLString: true
                                        });
                                        if (that.isEnableNotification) {
                                            that.chromeNotify(notifyTitle, notifyContent);
                                        }
                                        if (that.isEnableNoticePlayer) {
                                            that.playSystemAudio()
                                        }
                                    } else if (obj.at.user_id == that.userInfo.user_id) {
                                        let notifyTitle = "正在播放 " + that.urldecode(obj.user.user_name) + " 送你的歌";
                                        let notifyContent = "《" + obj.song.name + "》(" + obj.song.singer + ")";
                                        that.$notify({
                                            title: notifyTitle,
                                            message: notifyContent,
                                            duration: 5000,
                                            dangerouslyUseHTMLString: true
                                        });
                                        if (that.isEnableNotification) {
                                            that.chromeNotify(notifyTitle, notifyContent);
                                        }
                                        if (that.isEnableNoticePlayer) {
                                            that.playSystemAudio()
                                        }
                                    }
                                }
                                break;
                            case 'online':
                                that.sendAppEvent('online', {
                                    data: obj
                                });
                                that.onlineList = obj.data || [];
                                break;
                            case 'roomUpdate':
                                that.getRoomInfo(obj.reConnect == 1 ? true : false);
                                break;
                            default:
                        }
                    } catch (error) {
                        console.log(error)
                    }
                    that.autoScroll();
                },

                /**
                 * @description: 连接websocket
                 * @param {null}
                 * @return {null}
                 */
                connectWebsocket() {
                    let that = this;
                    // console.log("connection...");
                    that.websocket.connection = new WebSocket(that.websocket.url);
                    that.websocket.connection.onopen = function (evt) {
                        // console.log("链接成功");
                        that.websocket.isConnected = true;
                        that.websocket.isForceStop = false;
                    };
                    that.websocket.connection.onmessage = function (event) {
                        that.messageController(event.data);
                    };
                    that.websocket.connection.onclose = function (event) {
                        that.websocket.isConnected = false;
                        if (!that.websocket.isForceStop) {
                            that.doWebsocketError();
                        }
                    };
                },
                /**
                 * @description: 强制断开当前的websocket连接
                 * @param {null}
                 * @return {null}
                 */
                doForceCloseWebsocket() {
                    let that = this;
                    if (!that.websocket.isConnected) {
                        return true;
                    }
                    // console.log("wating...");
                    if (that.websocket.connection.readyState == 1) {
                        that.websocket.connection.send('bye');
                        that.websocket.connection.close();
                    }
                    setTimeout(function () {
                        return that.doForceCloseWebsocket();
                    }, 10);
                },
                /**
                 * @description: Websocket错误断开
                 * @param {null}
                 * @return {null}
                 */
                doWebsocketError() {
                    let that = this;
                    if (that.websocket.isForceStop) {
                        return;
                    }
                    // console.log("连接已断开，10s后将自动重连");
                    clearTimeout(that.websocket.reConnectTimer);
                    that.websocket.reConnectTimer = setTimeout(function () {
                        that.connectWebsocket();
                    }, 1000);
                }
            },
        }
</script>
<style>
    .el-dropdown-menu {
        padding: 0;
    }

    .bbbug_main_chat_item {
        position: relative;
        min-height: 70px;
        margin: 10px;
        text-align: left;
        padding-top: 30px;
    }

    .bbbug_main_chat_mine {
        text-align: right;
    }

    .bbbug_main_chat_head {
        position: absolute;
        left: 0px;
        top: 0px;
        cursor: pointer;
    }

    .bbbug_main_chat_head_image {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .bbbug_main_chat_mine .bbbug_main_chat_head {
        left: auto;
        right: 0px;
    }

    .bbbug_main_chat_name {
        position: absolute;
        left: 55px;
        top: 0px;
        display: inline-block;
        max-width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        line-height: 20px;
    }

    .bbbug_main_chat_name_icon {
        font-size: 12px;
        color: white;
        background-color: orangered;
        padding: 2px;
        border-radius: 3px;
        line-height: 12px;
        display: inline-block;
    }

    .bbbug_main_chat_mine .bbbug_main_chat_name {
        position: absolute;
        left: auto;
        right: 55px;
    }

    .bbbug_main_chat_context_menu {
        display: inline-block;
        overflow: hidden;
    }

    .bbbug_main_chat_content {
        background-color: #e5e5e5;
        padding: 8px 16px;
        border-radius: 10px;
        font-size: 14px;
        color: #666;
        max-width: 300px;
        margin-left: 60px;
        display: inline-block;
        word-break: break-all;
        word-wrap: break-word;
        position: relative;
    }

    .bbbug_main_chat_content::before {
        content: '';
        position: absolute;
        top: -6px;
        left: -13px;
        width: 15px;
        height: 15px;
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-bottom-width: 12px;
        border-bottom-color: currentColor;
        border-radius: 0 0 0 15px;
        color: #E5E5E5;
    }

    .content_boy::before {
        color: #66CBFF;
    }

    .content_girl::before {
        color: #FE9898;
    }

    .content_at::before {
        color: #666;
    }

    .bbbug_main_chat_mine .bbbug_main_chat_content::before {
        content: '';
        position: absolute;
        right: -15px;
        top: -6px;
        left: calc(100% - 2px);
        width: 15px;
        height: 15px;
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-bottom-width: 12px;
        border-bottom-color: currentColor;
        border-radius: 0 0 15px 0;
    }


    .bbbug_main_chat_content_reply {
        color: orangered;
        font-size: 12px;
        margin-left: 50px;
        cursor: pointer;
        margin-top: 5px;
        margin-right: 50px;
    }

    .bbbug_main_chat_mine .bbbug_main_chat_content {
        margin-left: auto;
        margin-right: 60px;
        text-align: left;
    }


    .bbbug_main_chat_notice .bbbug_main_chat_notice_title {
        background-color: #666;
        color: white;
        margin: -8px -16px;
        padding: 5px 10px;
        font-size: 12px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .bbbug_main_chat_notice .bbbug_main_chat_notice_content {
        font-size: 14px;
        margin-top: 15px;
    }

    .bbbug_main_chat_notice::before {
        color: #666;
    }

    .bbbug_main_chat_img {
        width: 60px;
        border-radius: 5px;
    }


    .bbbug_main_chat {
        position: absolute;
        left: 80px;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.95);
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        overflow: hidden;
    }

    .bbbug_main_chat_input {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100px;
    }

    .bbbug_main_chat_toolbar_lrc {
        position: absolute;
        left: 10px;
        bottom: 5px;
        color: #999;
        font-size: 12px;
    }

    .bbbug_main_chat_percent {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100px;
        height: 1px;
        background-color: #eee;
    }

    .bbbug_main_chat_percent div {
        position: relative;
    }

    .bbbug_main_chat_percent div::after {
        content: "";
        width: 4px;
        height: 4px;
        font-size: 0px;
        background-color: #999;
        border-radius: 100%;
        position: absolute;
        right: 0;
        top: -2px;
    }

    .bbbug_main_chat_percent div {
        height: 100%;
        background-color: #e5e5e5;
    }

    .bbbug_main_chat_input_form {
        padding: 10px;
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
    }

    .bbug_main_chat_input_message {
        width: 100%;
        height: 50px;
        outline: none;
        resize: none;
        background-color: transparent;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border: none;
        font-size: 14px;
        color: #333;
    }

    .bbbug_main_chat_input_send {
        position: absolute;
        right: 10px;
        bottom: 10px;
        border: none;
        background-color: #eee;
        color: #999;
        border-radius: 5px;
        padding: 8px 16px;
        cursor: pointer;
    }

    .bbbug_main_chat_invate {
        vertical-align: middle;
        font-size: 14px;
        margin-right: 10px;
        display: inline-block;
    }

    .bbbug_main_chat_enable {
        background-color: #666666;
        color: #fff;
    }


    .bbbug_app {
        position: absolute;
        left: 0;
        top: 42px;
        right: 0;
        height: 200px;
        border: none;
        border-bottom: 1px solid #e5e5e5;
        background-color: transparent;
        overflow: hidden;
    }

    .bbbug_app_fullpage {
        height: auto;
        bottom: 0;
        border-bottom: none !important;
    }

    .bbbug_dark .bbbug_app {
        border-bottom: 1px solid #444;
    }

    .bbbug_app iframe {
        width: 100%;
        height: 100%;
    }

    .bbbug_app_close {
        position: absolute;
        right: 0px;
        top: 42px;
        background-color: #ccc;
        font-size: 12px;
        padding: 3px 5px;
        border-radius: 0;
        color: white;
        cursor: pointer;
        z-index: 10;
    }

    .bbbug_dark .bbbug_app_close {
        background-color: #444;
    }

    .bbbug_app_close:hover {
        background-color: orange;
    }

    .bbbug_main_chat_history {
        position: absolute;
        left: 0;
        top: 42px;
        right: 0;
        bottom: 150px;
        overflow: hidden;
        overflow-y: scroll;
        padding-bottom: 30px;
        z-index: 0;
    }

    .bbbug_main_chat_system {
        text-align: center;
        margin: 5px 10%;
        margin-top: 10px;
        overflow: hidden;
    }

    .bbbug_main_chat_system_text {
        color: #aaa;
        background-color: transparent;
        text-align: center;
        font-size: 12px;
    }

    .bbbug_main_chat_toolbar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100px;
        height: 40px;
    }

    .bbbug_main_chat_toolbar_tobottom {
        position: absolute;
        right: 20px;
        bottom: 40px;
        z-index: 10;
    }

    .bbbug_main_chat_toolbar_tobottom i {
        color: #666;
        background-color: #fff;
        font-size: 28px;
        border-radius: 10px;
        width: 40px;
        height: 40px;
        display: inline-block;
        text-align: center;
        line-height: 42px;
        cursor: pointer;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    }

    .bbbug_main_chat_toolbar {
        margin-left: 10px;
        vertical-align: middle;
    }

    .bbbug_main_chat_toolbar_emoji {
        width: 32px;
        height: 32px;
        vertical-align: middle;
        margin-right: 5px;
        cursor: pointer;
    }

    .bbbug_main_chat_content_loading {
        position: absolute;
        right: 40px;
        top: 20px;
    }

    .bbbug_main_chat_content_loading .iconfont {
        font-size: 16px;
        font-weight: bold;
        color: #999;
    }

    .bbbug_main_chat_emojis {
        width: 280px;
        background-color: white;
        border-radius: 10px;
        z-index: 10;
        position: absolute;
        left: 20px;
        bottom: 150px;
        padding: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        text-align: center;
    }

    .bbbug_main_chat_emojis img {
        width: 36px;
        height: 36px;
        margin: 5px;
        cursor: pointer;
    }

    .bbbug_main_chat_toolbar_img {
        width: 28px;
        height: 28px;
        vertical-align: middle;
        cursor: pointer;
        display: inline-block;
    }

    .bbbug_main_chat_toolbar_img img {
        width: 28px;
        height: 28px;
        vertical-align: middle;
        cursor: pointer;
    }

    .bbbug_main_chat_name_time {
        font-size: 12px;
        color: #aaa;
        text-align: left;
        margin-left: 55px;
        margin-right: 55px;
        margin-top: 5px;
    }

    .bbbug_main_chat_mine .bbbug_main_chat_name_time {
        text-align: right;
    }

    .bbbug_main_chat_input_quot {
        position: absolute;
        left: 90px;
        bottom: 105px;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 20px;
    }

    .bbbug_main_chat_content_quot {
        font-size: 12px;
        color: #aaa;
        background-color: #eee;
        border-radius: 5px;
        padding: 2px 5px;
        display: inline-block;
        margin: 5px 50px;
        cursor: pointer;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content_girl {
        background-color: #FE9898;
        color: white;
    }

    .content_boy {
        background-color: #66CBFF;
        color: #333;
    }

    .content_at {
        background-color: #666666;
        color: white;
    }

    .contextmenu {
        background-color: white;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        position: fixed;
        z-index: 100;
    }

    .contextmenu div {
        padding: 8px 30px;
        font-size: 14px;
        color: #666;
        border-radius: 10px;
    }

    .contextmenu div:hover {
        background-color: #f5f5f5;
        cursor: pointer;
    }

    .bbbug_link {
        position: fixed;
        right: 10px;
        bottom: 10px;
    }

    .bbbug_link a {
        font-size: 14px;
        text-decoration: none;
        color: rgba(255, 255, 255, 1);
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    }

    .bbbug_link a:hover {
        color: #fff;
        text-decoration: underline;
    }

    .bbbug_main_chat_jump_id {
        border-radius: 3px;
        background-color: #ddd;
        font-size: 12px;
        margin-right: 5px;
        display: inline-block;
        color: #666;
        padding: 2px 5px;
    }

    .bbbug_main_chat_jump {
        position: relative;
        cursor: pointer;
        min-width: 200px;
    }

    .bbbug_main_chat_jump_desc {
        font-size: 12px;
        margin-top: 10px;
        color: #999;
        margin-bottom: 40px;
    }

    .bbbug_main_chat_jump_tips {
        position: absolute;
        background-color: #666;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 5px 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        font-size: 12px;
        color: #fff;
    }

    .bbbug_main_chat_jump_tips font {
        position: absolute;
        right: 10px;
    }

    .bbbug_main_chat_input_song {
        font-size: 14px;
        position: absolute;
        right: 10px;
        bottom: 5px;
        color: rgb(121, 115, 115);
    }

    .bbbug_main_chat_input_song_name {
        font-size: 12px;
        display: inline-block;
        margin-right: 5px;
        color: #aaa;
        vertical-align: middle;
    }

    .bbbug_main_chat_input_song_name * {
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
    }

    .bbbug_main_chat_input_song_ctrl {
        display: inline-block;
        vertical-align: middle;
    }

    .bbbug_main_chat_input_song_ctrl .iconfont {
        font-size: 20px;
        color: #666;
        cursor: pointer;
    }

    .bbbug_main_chat_input_song_ctrl .iconfont:hover {
        color: orangered;
    }

    .bbbug_main_chat_emojis_input {
        margin-bottom: 10px;
    }

    .bbbug_locked {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .bbbug_locked .main {
        width: 1000px;
        height: 500px;
        backdrop-filter: blur(0px);
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    }

    .bbbug_locked .bg_back {
        filter: blur(50px);
        position: fixed;
        left: -100px;
        right: -100px;
        top: -100px;
        bottom: -100px;
        background: #000 url(https://bbbug.hamm.cn/new/images/bg_dark.jpg) center no-repeat;
        background-size: cover;
    }

    .bbbug_locked .bg {
        filter: blur(50px);
        position: fixed;
        left: -100px;
        right: -100px;
        top: -100px;
        bottom: -100px;
        background: transparent url(https://bbbug.hamm.cn/new/images/bg_dark.jpg) center no-repeat;
        background-size: cover;
    }

    .bbbug_locked {
        color: white;
        z-index: 100;
    }

    .bbbug_locked .pic {
        width: 360px;
        height: 360px;
        position: absolute;
        left: 0px;
        top: 50px;
        border-radius: 20px;
        overflow: hidden;
    }

    .bbbug_locked .pic img {
        width: 100%;
        height: 100%;
    }

    .bbbug_locked .info {
        position: absolute;
        left: 400px;
        top: 50px;
        width: 560px;
    }

    .bbbug_locked .name {
        font-size: 36px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bbbug_locked .desc {
        font-size: 20px;
        margin-top: 10px;
        color: rgba(255, 255, 255, 0.5);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bbbug_locked .controls {
        position: absolute;
        left: 400px;
        top: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bbbug_locked .controls .iconfont {
        display: inline-block;
        font-size: 64px;
        cursor: pointer;
    }

    .bbbug_locked .progress {
        background-color: rgba(255, 255, 255, 0.1);
        position: absolute;
        left: 400px;
        top: 330px;
        height: 5px;
        border-radius: 20px;
        width: 560px;
    }

    .bbbug_locked .progress div {
        background: rgba(255, 255, 255, 0.5);
        width: 20%;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 20px;
    }

    .bbbug_locked .time {
        position: absolute;
        left: 400px;
        top: 340px;
        color: rgba(255, 255, 255, 0.8);
        width: 560px;
    }

    .bbbug_locked .time .now {
        position: absolute;
        left: 0;
        top: 0;
    }

    .bbbug_locked .time .total {
        position: absolute;
        right: 0;
        top: 0;
    }

    .bbbug_locked .logo {
        position: absolute;
        left: 20px;
        top: 20px;
    }

    .bbbug_locked .logo img {
        width: 40px;
        height: 40px;
        vertical-align: middle;
        border-radius: 10px;
    }

    .bbbug_locked .copyright {
        position: fixed;
        right: 20px;
        bottom: 20px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    .bbbug_locked .lrc {
        font-size: 20px;
        color: rgba(255, 255, 255, 0.8);
        position: absolute;
        left: 400px;
        top: 380px;
        width: 560px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bbbug_main_menu [data-count] {
        position: relative;
    }

    .bbbug_main_menu [data-count]:not([data-count='0'])::before {
        content: attr(data-count);
        font-weight: bold;
        color: #333;
        background-color: #999;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        border: solid 2px currentColor;
        font-size: 12px;
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(calc(-50% - 10px), calc(-50% + 8px));
        pointer-events: none;
    }
</style>